Slick Slide 슬라이드 페이지 표시

slick.js

 

See the Pen Slick Slide 슬라이드 페이지 표시 by kimyangsun (@kimyangsun) on CodePen.

 

Slick Slide 슬라이드 페이지가 표시되는 기능

커스텀 코드펜 코드입니다.

아래는 js 코드입니다. :)

/* 슬라이드가 넘어간 후에 페이지 카운팅 */
// $(function(){
//     // 슬라이드
//     let slide = $('.slide');
//     let currentSlide;
//     let slidesCount;
//     let currentCount = $('.slide-count .current');
//     let totalCount = $('.slide-count .total');

//     let updateSlideCounter = function(slick, currentIndex) {
//         currentSlide = slick.slickCurrentSlide() + 1;
//         slidesCount = slick.slideCount;
//         currentCount.text(currentSlide);
//         totalCount.text(slidesCount);
//     };

//     slide.on('init', function(event, slick) {
//         updateSlideCounter(slick);
//     });

//     slide.on('afterChange', function(event, slick, currentSlide) {
//         updateSlideCounter(slick, currentSlide);
//     });

//     slide.slick({
//         slidesToShow: 1,
//         speed:200,
//         autoplay:true,
//         autoplaySpeed:10000,
//         prevArrow: $('.slide-nav .slide-prev'),
//         nextArrow: $('.slide-nav .slide-next'),
//     });
// });


/* 슬라이드가 넘어가는 그 순간 페이지 카운팅 */
$(function() {
    let slide = $('.slide');
    let currentSlide;
    let slidesCount;
    let currentCount = $('.slide-count .current');
    let totalCount = $('.slide-count .total');

    let updateSlideCounter = function(slick, nextSlide) {
        currentSlide = nextSlide + 1 || 1;
        slidesCount = slick.slideCount;
        currentCount.text(currentSlide);
        totalCount.text(slidesCount); 
    };

    slide.on('init', function(event, slick) {
        updateSlideCounter(slick);
    });

    slide.on('beforeChange', function(event, slick, currentSlide, nextSlide) {
        updateSlideCounter(slick, nextSlide);
    });

    slide.slick({
        slidesToShow: 1,
        speed:200,
        autoplay:true,
        autoplaySpeed:10000,
        prevArrow: $('.slide-nav .slide-prev'),
        nextArrow: $('.slide-nav .slide-next'),
    })
})