Swiper carousel with loop

дата/aвтор: 25.01.2021/Рангел

Каросел, на който се качват снимки в контейнер като бекграунд.
!!! Когато имаме loop: true като опция трябва да махнем лейзилоудинга от снимките качени през цмс4.

пресет:

Необходими файлове: CSS Files JS Files Custom CSS Links

swiper.min.css файла се слага в рута на папката css, a swiper.min.js се добавя в /js/vendor

В le-styles.css да се добави според случая:

/* Swiper carousel with loop */
.cms-page-edit .carousel-slider {
    height: auto !important;
}
.cms-page-edit .carousel-slider .swiper-wrapper {
    overflow: visible !important;
}
.cms-page-edit .carousel-slider .swiper-slide:nth-child(1n) {
    width: 100% !important;
}

Кода за самият слайдър се слага в _require.js:

    ".carousel-slider": {
       "assets": ["/js/vendor/swiper.min.js", "../css/swiper.min.css"],
       "function":function() {
            var swiper = new Swiper('.carousel-slider', {
                loop: true,
                slidesPerView: 1,
                spaceBetween: 36,
                grabCursor: true,
                autoplay: {
                    delay: 2500,
                    disableOnInteraction: false,
                },                              
                breakpoints: {
                640: {
                    slidesPerView: 2,
                    spaceBetween: 36,
                },
                760: {
                    slidesPerView: 3,
                    spaceBetween: 36,
                },
                1200: {
                    slidesPerView: 4,
                    spaceBetween: 36,
                },
              } 
            });
        } 
    }