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> |


