| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172 |
- ;(function(){
- 'use strict';
- const deck = document.querySelector('.deck');
- if (!deck) return;
- const slides = deck.querySelectorAll('.slide');
- const total = slides.length;
- // Insert slide numbers
- slides.forEach((sl, i) => {
- const footer = sl.querySelector('.slide-number');
- if (footer) {
- footer.dataset.current = i + 1;
- if (total > 1) footer.dataset.total = total;
- }
- sl.dataset.index = i;
- });
- let current = 0;
- let isAnimating = false;
- function goTo(idx){
- if(isAnimating) return;
- idx = Math.max(0, Math.min(idx, total - 1));
- if(idx === current) return;
- isAnimating = true;
- const dir = idx > current ? 1 : -1;
- slides.forEach((sl, i)=>{
- sl.classList.remove('is-active', 'is-prev');
- });
- slides[current].classList.add('is-prev');
- slides[idx].classList.add('is-active');
- current = idx;
- setTimeout(()=>{ isAnimating = false; }, 550);
- }
- function next(){ goTo(current + 1); }
- function prev(){ goTo(current - 1); }
- // Keyboard nav
- document.addEventListener('keydown', e=>{
- if(e.key === 'ArrowRight' || e.key === 'ArrowDown' || e.key === ' ') { e.preventDefault(); next(); }
- if(e.key === 'ArrowLeft' || e.key === 'ArrowUp') { e.preventDefault(); prev(); }
- if(e.key === 'Home') goTo(0);
- if(e.key === 'End') goTo(total - 1);
- });
- // Click/tap nav
- deck.addEventListener('click', e=>{
- if(e.target.closest('.slide-inner')) return;
- if(e.target.closest('.deck-footer')) return;
- const w = deck.clientWidth;
- if(e.clientX > w * 0.6) next();
- else if(e.clientX < w * 0.4) prev();
- });
- // Touch support
- let tx = 0;
- deck.addEventListener('touchstart', e=>{ tx = e.changedTouches[0].clientX; }, {passive:true});
- deck.addEventListener('touchend', e=>{
- const dx = e.changedTouches[0].clientX - tx;
- if(Math.abs(dx) < 60) return;
- dx > 0 ? prev() : next();
- }, {passive:true});
- // Init first slide
- slides[0] && slides[0].classList.add('is-active');
- })();
|