I am currently working on replicating the functionality of the Book My show Application. Specifically, I am developing a Cast and Crew slider. Despite my efforts to decrease the size of the images, the spacing between them remains unchanged.
Here is my Javascript file that includes the source and settings for the slider:
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;This is the Javascript file responsible for rendering the slider:
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;Furthermore, I have integrated it as a component in a page:
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;The outcome: This displays the output of the code
I am looking to minimize the space between the images. Thank you.