KCSlider

Не требует подключения дополнительных библиотек.

Параметры инициализации приближены к owl слайдеру.

Пример иницилизация

css

<link rel="stylesheet" href="css/KCSlider.min.css">
<style>
    .slideItem{
        display: block;
        position: relative;
        width: 100%;
        min-height: 100px;
    }
</style>

js

<script src="js/KCSlider.min.js"></script>

html

Для назначения стандартных стилей обязательно должен присутствовать класс kc-carousel

<div class="slider kc-carousel">
    <img class="slideItem" data-src="img/100.jpeg" alt="">
    <img class="slideItem" data-src="img/101.jpeg" alt="">
    <img class="slideItem" data-src="img/102.jpeg" alt="">
    <img class="slideItem" data-src="img/103.jpeg" alt="">
    <img class="slideItem" data-src="img/104.jpeg" alt="">
    <img class="slideItem" data-src="img/105.jpeg" alt="">
    <img class="slideItem" data-src="img/106.jpeg" alt="">
    <img class="slideItem" data-src="img/108.jpeg" alt="">
    <img class="slideItem" data-src="img/109.jpeg" alt="">
</div>

Иницилизация

if(typeof KCSlider==="undefined"){window['KCSlider']={'s':[],ready(f){this.s.push(f)}}}
KCSlider.ready(()=>{
    KCSlider.init('.slider.kc-carousel', {
        'items':2,
        'margin':15,
        'autoHeight':true,
        'dots':true,
        'btnPlay':true,
        'loop':true,
        'autoplayTimeout':5000,
        'responsive':{
            484:3,
            767:5,
            991:7,
            1199: {
                'items':4,
                'autoplay':false
            },
        }
    });
});

Отложенный запуск

Если вы хотите выполнить свой код или иницилизировать слайдер исключительно после загрузки основной библиотеки, используйте следующий код:

if(typeof KCSlider==="undefined"){window['KCSlider']={'s':[],ready(f){this.s.push(f)}}}
KCSlider.ready(()=>{
    /*ВАШ КОД*/
});

Дополнительные классы

В параметрах иницилизации можно передать строку с собственным классом для элементов сгенерированных слайдером

'class':{ // Дополнительные классы
    'blockArrow':'', //Блок стрелок
    'btnArrow':'', // Кнопка стрелок
    'btnArrowNext':'', // Кнопка стрелки следующий слайд
    'btnArrowPrep':'', // Кнопка стрелки предыдущий слайд
    'blockDots':'', // Блок точек навигации
    'btnDot':'', // Кнопка точки
    'btnList':'', // Блок дополнительных кнопок
    'btn':'', // Дополнительные кнопки
    'btnNext':'', // Кнопка в конец слайдера
    'btnPrep':'', // Кнопка в начало слайдера
    'btnPause':'', // Кнопка в паузы автопролистывания
    'item':'', // Блок слайда
    'carouselLine':'', // Блок слайдов
    'carouselBody':'', // Родительский блок слайдов
}

html код для вставки

В параметрах иницилизации можно передать строку с собственным html кодом, который бедет вставлен в соответсвующий элемент слайдера при генерации

'content':{ // html код для вставки
    'btnArrow':'', // Кнопка стрелок
    'btnArrowNext':'', // Кнопка стрелки следующий слайд
    'btnArrowPrep':'', // Кнопка стрелки предыдущий слайд
    'btnDot':'', // Кнопка точки (строка для всех, либо объект с содержимым по номеру начиная с 0)
    'btnPause':'', // Дополнительные кнопки (строка для всех, либо объект с содержимым по номеру начиная с 0)
}

События

При иницилизации слайдера можно передать свои собственные функции для кастомизации под ваши задачи. События так же восприимчивы к изменению ширины экрана через responsive

'events':{ //события
    'onBeforeRender':function(){}, //перед рендером слайдера
    'onAfterRender':function(){}, // после рендера слайдера
    'onBeforeNext':function(){}, //перед пролистыванием слайдера вперед
    'onAfterNext':function(){}, // после пролистывания слайдера вперед
    'onBeforeBack':function(){}, //перед пролистыванием слайдера назад
    'onAfterBack':function(){}, // после пролистывания слайдера назад
    'onBeforeResize':function(){}, //перед изменением размера слайдера
    'onAfterResize':function(){}, // после изменения размера слайдера
    'onBeforePause':function(){}, // перед установкой прокрутки на паузу
    'onAfterPause':function(){}, // после установки прокрутки на паузу
    'onBeforePlay':function(){}, // перед началом прокрутки слайдера
    'onAfterPlay':function(){}, // после начала прокрутки слайдера
    'onBeforeSetSlide':function(){}, // перед тем как задается номер слайда
    'onAfterSetSlide':function(){}, // после того как установился слайдер по номеру
    'onBeforeMove':function(){}, // перед началом смещения слайдов
    'onMove':function(){}, // смещение слайдов
    'onAfterMove':function(){}, // после смещения слайдов
    'onClickSlide':function(){}, // Клик по слайду
    'onShowHint':function(){}, // При показе анимации подсказки свайпа слайдера
}

Пример использования

if(typeof KCSlider==="undefined"){window['KCSlider']={'s':[],ready(f){this.s.push(f)}}}
KCSlider.ready(()=>{
    KCSlider.init('.slider.kc-carousel', {
        'items':2,
        'events':{
            'onBeforeRender':function (slider){
                console.log('onBeforeRender');
            },
            'onAfterRender':function (slider){
                console.log('onAfterRender');
            },
            'onBeforeNext':function (slider){
                console.log('onBeforeNext');
            },
            'onAfterNext':function (slider){
                console.log('onAfterNext');
            },
            'onBeforeBack':function (slider){
                console.log('onBeforeBack');
            },
            'onAfterBack':function (slider){
                console.log('onAfterBack');
            },
            'onBeforeResize':function (slider){
                console.log('onBeforeResize');
            },
            'onAfterResize':function (slider){
                console.log('onAfterResize');
            },
            'onBeforePause':function (slider){
                console.log('onBeforePause');
            },
            'onAfterPause':function (slider){
                console.log('onAfterPause');
            },
            'onBeforePlay':function (slider){
                console.log('onBeforePlay');
            },
            'onAfterPlay':function (slider){
                console.log('onAfterPlay');
            },
        }
    });
});