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

Question

我正在尝试克隆 Book My show Application。我正在构建演员和工作人员滑块。我尝试减小图像的大小，但图像之间的间距似乎没有减小。

这是我的 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;

结果： 这是代码的结果

我想减少图像之间的间距。谢谢你。

标签： javascripthtmlcssreactjstailwind-css

Answer 1

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

您的 Cast 组件可能如下所示

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