Swiper fade slider with loop

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

Слайдър, на който се качват снимки в контейнер като бекграунд.

пресет:

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

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

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

/* Swiper fade slider with loop */
.header-slider {
    height: auto !important;
}
.cms-page-edit .header-slider .swiper-wrapper {
    overflow: visible !important;
}
.cms-page-edit .header-slider .swiper-pagination {
    position: relative !important;
    bottom: unset !important;
    left: unset !important;
    transform: translateX(0%) !important;
}

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

    ".header-slider": {
        "assets": ["/js/vendor/swiper.min.js", "../css/swiper.min.css"],        
        "function":function() {
            var swiper = new Swiper('.header-slider', {
                autoplay: {
                    delay: 4500,
                    disableOnInteraction: false,
                },                                                
                pagination: {
                    el: '.swiper-pagination',
                    clickable: true,
                    renderBullet: function (index, className) {
                    return '' + (index + 1) + '';
                    },
                    
                },
                loop: true,
                effect: 'fade',
                speed: 3000,                
            });        
        }        
    },