npm i swiper

import { Swiper, SwiperSlide } from "swiper/react";
import { Navigation } from "swiper";
const MovieDetail = () => {
return(
<>
   <Swiper
            slidesPerView={5}
            loop={false}
            modules={[Navigation]}
            tag="ul"
            className="position-relative swiper-card list-inline"
            breakpoints={
                0: {
                slidesPerView: 1,
                spaceBetween: 0,
                },
                576: {
                slidesPerView: 2,
                spaceBetween: 0,
                },
                768: {
                slidesPerView: 3,
                    : 0,
                },
                1025: {
                slidesPerView: 5,
                spaceBetween: 0,
                },
                1500: {
                slidesPerView: 5,
                spaceBetween: 0,
                },
            }>

            <SwiperSlide >
                <div className = "slider__image" >
                    <img src = { img1 } alt = "" loading = "lazy" />
                </div>
            </SwiperSlide>
            < SwiperSlide >
                <div className = "slider__image" >
                    60;img src = { img2 } alt = "" loading = "lazy" />
                </div>
            </SwiperSlide>
            < SwiperSlide >
                <div className = "slider__image" >
                    <img src = { img3 } alt = "" loading = "lazy" />
                </div>
            </SwiperSlide>
    </Swiper>
</>
)
}