KARAKOK.NET Loading

Lütfen Bekleyiniz..

Carousel

Left to right and Autoplay

Top to bottom and Autoplay

1 Slide Per Move

Ease Out Back

Linear Easing

Slow Out Easing

Slow Out Easing

Stil Referansı


<link rel="stylesheet" href="https://wui.karakok.net/dist/css/splide.min.css" />

Script Referansı


<script src="https://wui.karakok.net/dist/js/splide.min.js"></script>

Örnek Kullanım

HTML Javascript 

<div id="sampleSlider7" class="splide">
    <div class="splide__track">
        <ul class="splide__list">
            <li class="splide__slide prod-img"><a href="#"><img data-splide-lazy="https://cdn.karakok.net/krm//evy/online-deneme-sinavi.png"></a></li>
            <li class="splide__slide prod-img"><a href="#"><img data-splide-lazy="https://cdn.karakok.net/krm//evy/soru-cozum-videolari.png"></a></li>
            <li class="splide__slide prod-img"><a href="#"><img data-splide-lazy="https://cdn.karakok.net/krm//evy/kitaplari-incele.png"></a></li>
            <li class="splide__slide prod-img"><a href="#"><img data-splide-lazy="https://cdn.karakok.net/krm//evy/egitim-vadisi-icerik-indir-1.png"></a></li>
            <li class="splide__slide prod-img"><a href="#"><img data-splide-lazy="https://cdn.karakok.net/krm//evy/konu-anlatim-videolari.png"></a></li>
            <li class="splide__slide prod-img"><a href="#"><img data-splide-lazy="https://cdn.karakok.net/krm//evy/ev-urun-fiyat-listesi-icon-02.png"></a></li>
            <li class="splide__slide prod-img"><a href="#"><img data-splide-lazy="https://cdn.karakok.net/krm//evy/egitim-vadisi-icerik-indir-1.png"></a></li>
            <li class="splide__slide prod-img"><a href="#"><img data-splide-lazy="https://cdn.karakok.net/krm//evywebs/bayilerimiz-1.png"></a></li>
        </ul>
    </div>
</div>


new Splide('#sampleSlider7', {
    type: 'loop',
    autoplay: true,
    slideFocus: false,
    pauseOnFocus: false,
    resetProgress: false,
    perPage: 3,
    breakpoints: {
        '567': {
            perPage: 2
        }
    },
    perMove: 1,
    direction: 'ltr', // 'ltr': Left to right, 'rtl': Right to left, 'ttb': Top to bottom..
    lazyLoad: 'nearby',
    interval: 3000,
    speed: 400,
}).mount();