통합검색

Javascript

[Javascript] swiper 슬라이드현재번호 & 일시정지/재생버튼 구현

  • 2026.05.20 15:37:02


swiper 슬라이드현재번호 & 일시정지/재생버튼 구현
아래 결과 화면 참고




[!]swiper 코드[/!] 
const visualEl = document.querySelector('.visual');
const nowEl = visualEl.querySelector('.now');
const totEl = visualEl.querySelector('.tot');
const pauseBtn = visualEl.querySelector('.pause');

let isPause = false;

const swiper = new Swiper('.visual', {
    loop: true,
    autoplay: {
        delay: 4000,
        disableOnInteraction: false
    },
    pagination: {
        el: '.visual .dots',
        clickable: true
    },
    navigation: {
        prevEl: '.visual .arrows .prev',
        nextEl: '.visual .arrows .next'
    },
    allowTouchMove: true,
    simulateTouch: true,
    grabCursor: true,
    speed: 500,
    spaceBetween: 0,
    slidesPerView: 1,
    on: {
        init: function () {
            updateCount(this);
        },
        slideChange: function () {
            updateCount(this);
        }
    }
});

function updateCount(swiper) {
    const total = visualEl.querySelectorAll('.roll > .swiper-slide:not(.swiper-slide-duplicate)').length;
    const current = swiper.realIndex + 1;

    nowEl.textContent = String(current).padStart(2, '0');
    totEl.textContent = String(total).padStart(2, '0');
}

pauseBtn.addEventListener('click', function () {
    if (isPause) {
        swiper.autoplay.start();
        pauseBtn.classList.remove('stop');
        isPause = false;
    } else {
        swiper.autoplay.stop();
        pauseBtn.classList.add('stop');
        isPause = true;
    }
});

[!]HTML 코드[/!] 

<div class="visual swiper">
    <div class="roll swiper-wrapper">
        <div class="item swiper-slide"><img src="" /></div>
        <div class="item swiper-slide"><img src="" /></div>
    </div>

    <div class="arrows_wrap">
        <div class="count">
            <span class="now">01</span>
            <div class="dots"></div>
            <span class="tot">01</span>
        </div>
        <div class="arrows">
            <button type="button" class="prev">prev</button>
            <button type="button" class="next">next</button>
            <button class="pause">play & pause</button>
        </div>
    </div>
</div>