pico-slider-js/dist/slider.min.js

A lightweight, reusable image slider for Pico.css (or standalone).

!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):(t="undefined"!=typeof globalThis?globalThis:t||self).PicoSlider=e()}(this,function(){"use strict";return class{constructor(t,e={}){this.el=t,this.track=t.querySelector(".pico-slides"),this.slides=Array.from(this.track.querySelectorAll("img")),this.indicators=t.querySelector(".pico-indicators"),this.captionEl=t.querySelector(".pico-caption"),this.prevBtn=t.querySelector(".pico-prev"),this.nextBtn=t.querySelector(".pico-next"),this.index=0,this.total=this.slides.length,this.timer=null,this.settings=Object.assign({autoplay:!0,interval:4e3,swipeThreshold:50},e),this.setup()}setup(){this.slides.forEach((t,e)=>{const i=document.createElement("button");i.setAttribute("role","tab"),i.setAttribute("aria-label",`Go to slide ${e+1}`),i.addEventListener("click",()=>this.goTo(e)),this.indicators.appendChild(i)}),this.dots=Array.from(this.indicators.children),this.prevBtn.addEventListener("click",()=>this.goTo(this.index-1)),this.nextBtn.addEventListener("click",()=>this.goTo(this.index+1)),this.el.setAttribute("tabindex","0"),this.el.addEventListener("keydown",t=>{"ArrowRight"===t.key&&this.goTo(this.index+1),"ArrowLeft"===t.key&&this.goTo(this.index-1)}),this.el.addEventListener("mouseenter",()=>this.stopAutoplay()),this.el.addEventListener("mouseleave",()=>this.startAutoplay());let t=0,e=0;this.el.addEventListener("touchstart",i=>{t=e=i.touches[0].clientX},{passive:!0}),this.el.addEventListener("touchmove",t=>{e=t.touches[0].clientX},{passive:!0}),this.el.addEventListener("touchend",()=>{const i=t-e;Math.abs(i)>this.settings.swipeThreshold&&(i>0?this.goTo(this.index+1):this.goTo(this.index-1))}),this.sync(),this.startAutoplay()}sync(){this.track.style.transform=`translateX(-${100*this.index}%)`,this.dots.forEach((t,e)=>t.setAttribute("aria-current",e===this.index?"true":"false")),this.captionEl&&(this.captionEl.textContent=this.slides[this.index].alt)}goTo(t){this.index=(t+this.total)%this.total,this.sync()}startAutoplay(){this.settings.autoplay&&(this.stopAutoplay(),this.timer=setInterval(()=>this.goTo(this.index+1),this.settings.interval))}stopAutoplay(){this.timer&&clearInterval(this.timer),this.timer=null}}});
//# sourceMappingURL=slider.min.js.map