<div class="swiper-container mySwiper iq-width overflow-hidden mx-auto">
            <div class="swiper-wrapper ">
                <div class="swiper-slide">
                    <img class="img-fluid w-100 rounded" src="../../../assets/images/swiper/01.jpg" alt="image" />
                </div>
                <div class="swiper-slide">
                    <img class="img-fluid w-100 rounded" src="../../../assets/images/swiper/02.jpg" alt="image" />
                </div>
                <div class="swiper-slide">
                    <img class="img-fluid w-100 rounded" src="../../../assets/images/swiper/03.jpg" alt="image" />
                </div>
                <div class="swiper-slide">
                    <img class="img-fluid w-100 rounded" src="../../../assets/images/swiper/04.jpg" alt="image" />
                </div>
                <div class="swiper-slide">
                    <img class="img-fluid w-100 rounded" src="../../../assets/images/swiper/05.jpg" alt="image" />
                </div>
                <div class="swiper-slide">
                    <img class="img-fluid w-100 rounded" src="../../../assets/images/swiper/06.jpg" alt="image" />
                </div>
                <div class="swiper-slide">
                    <img class="img-fluid w-100 rounded" src="../../../assets/images/swiper/07.jpg" alt="image" />
                </div>
                <div class="swiper-slide">
                    <img class="img-fluid w-100 rounded" src="../../../assets/images/swiper/08.jpg" alt="image" />
                </div>
                <div class="swiper-slide">
                    <img class="img-fluid w-100 rounded" src="../../../assets/images/swiper/09.jpg" alt="image" />
                </div>
            </div>
        </div>

var swiper = new Swiper(".mySwiper", {
    effect: "coverflow",
    grabCursor: true,
    centeredSlides: true,
    slidesPerView: 5,
    spaceBetween: 40,
    coverflowEffect: {
        rotate: 0,
        stretch: 0,
        depth: 142,
        modifier: 1,
        slideShadows: true,
    },
    loop: true,
    breakpoints: {
        0: {
            slidesPerView: 2,
            spaceBetween: 20,
        },
       
        375: {
            slidesPerView: 2,
            spaceBetween: 20,
        },
     
        768: {
            slidesPerView: 3,
            spaceBetween: 30,
        },
     
        1024: {
            slidesPerView: 5,
            spaceBetween: 30,
        },
        1500: {
            slidesPerView: 5,
            spaceBetween: 30,
          },
    },
    on: {
        click: function() {
            if (event.clientX < swiper.width / 2) {
                swiper.slidePrev();
            } else {
                swiper.slideNext();
            }
        }
    },
});