无法减小图像的大小 div - React Js，Tailwind

Question

我正在尝试制作 Book My show 应用程序的克隆。我正在构建演员和工作人员滑块。我试着缩小图片的大小，但图片之间的间距似乎并没有减少。

这是我的 js 文件，包含 src，滑块设置：

import React from "react";
import Slider from "react-slick";

import CastPoster from "../MovieCast/movieCast.component";

const Cast = (props) => {
 
    const settings = {
        infinite: true,
        autoplay: false,
        speed: 1500,
        slidesToShow: 4,
        slidesToScroll: 2,
        InitialSlide: 0,
    }
    
    const CastImages = [
        {
            src:"https://in.bmscdn.com/iedb/artist/images/website/poster/large/simu-liu-2006167-13-05-2021-04-13-21.jpg",
            name:"Simu Liu",
            role:"as Shang-Chi"
        },

        {
            src:"https://in.bmscdn.com/iedb/artist/images/website/poster/large/awkwafina-1093500-20-06-2018-12-05-44.jpg",
            name:"Awkwafina",
            role:"as Katy"
        },

        {
            src:"https://in.bmscdn.com/iedb/artist/images/website/poster/large/tony-leung-iein105711-02-04-2018-13-07-58.jpg",
            name:"Tony Leung Chiu-wai",
            role:"as Wenwu / The Mandarin"
        },

        {
            src:"https://in.bmscdn.com/iedb/artist/images/website/poster/large/michelle-yeoh-1473-24-03-2017-17-32-23.jpg",
            name:"Michelle Yeoh",
            role:"as Jiang Nan"
        }
    ];
    
    return (
        <>
        <div className="">
            <Slider {...settings}>
                {
                    CastImages.map((data) => (
                        <CastPoster {...data} />
                    ))
                }
            </Slider>  
        </div>
        </>
    )
};

export default Cast;

这是包含滑块渲染的js文件：

import React from "react";

const CastPoster = (props) => {
    return (
        <>
        <div className="">
                <img className="rounded-full w-32 h-32 " src={props.src} atl={props.name} />
            <div>
                <h3> {props.name} </h3>
                <p> {props.role} </p>
            </div>
        </div>
        </>
    );
};

export default CastPoster;

并且我已将其添加为页面中的组件：

import React from "react";
import Cast from "../components/Cast/Cast.component";
import MovieHero from "../components/MovieHero/MovieHero.component";
import offerIcon from "./offericon.png";


const MoviePage = () => {
    return (
        <>
        <MovieHero />
        <div className="my-12 container px-4 lg:w-3/4 lg:ml-20">
            <div className="flex flex-col items-start gap-3">
                <h2 className="text-gray-800 font-bold text-2xl"> About the movie </h2>
                <p> Shang-Chi and The Legend of The Ten Rings features Simu Liu as Shang-Chi, who must confront the past he thought he left behind when he is drawn into the web of the mysterious Ten Rings organization. The film is directed by Destin Daniel Cretton and produced by Kevin Feige and Jonathan Schwartz.</p>
            </div>
            <div className="my-8">
                <hr />
            </div>
            <div>
                <h1 className="text-gray-800 font-bold text-2xl pb-4"> Applicable Offers </h1>
                <div className="flex items-start gap-2 bg-yellow-100 border-yellow-400 border-2 border-dashed rounded-md p-3 w-96">
                    <img className="h-6" src={offerIcon}/>
                    <div className="flex flex-col items-start">
                        <h3 className="relative -top-1 text-gray-900 text-md font-semibold"> Filmy Pass </h3>
                        <p className="text-gray-600 -top-1 text-sm"> Get Rs.75* off on 3 movies you buy/rent on Stream. Buy Filmy Pass @Rs.99 </p>
                    </div>
                </div>
            </div>
            <div className="my-8">
                <hr />
            </div>
            <div>
                <h3> Cast </h3>
                <div>
                    <Cast />
                </div>
            </div>
        </div>
        </>
    )
};

export default MoviePage;

结果： This is the result of the code

我想缩小图片之间的间距。谢谢。

Answer 1

图像之间的 space 取决于要显示的幻灯片数量和滑块的宽度 div。要减少图像之间的 space，请减小滑块的宽度或显示更多图像。

您的 Cast 组件可能如下所示

<div className="w-full">
    <Slider {...settings} className="w-1/2">
        {
            CastImages.map((data) => (
                <CastPoster {...data} />
            ))
        }
    </Slider>
</div>

无法减小图像的大小 div - React Js，Tailwind

Could not reduce the size of the Image div - React Js , Tailwind

html

javascript

css

reactjs

tailwind-css