swiffy-slider/dist/js/swiffy-slider.js

Swiffy slider is a touch enabled super lightweight html slider and carousel using browser scroll, css grid and scroll snap align and less than 1.5 kb javascript. Comes in css mode only version

const f={version:"2.1.0",_c(t){return t.querySelector(".slider-container")},_has(t,o){return t.classList.contains(o)},_rtl(t){return getComputedStyle(t).direction==="rtl"},init(t=document.body){for(const o of t.querySelectorAll(".swiffy-slider"))this.initSlider(o)},initSlider(t){this._rtl(t)&&t.setAttribute("dir","rtl");for(const o of t.querySelectorAll(".slider-nav")){const s=this._has(o,"slider-nav-next");o.addEventListener("click",()=>this.slide(t,s),{passive:!0})}for(const o of t.querySelectorAll(".slider-indicators"))o.addEventListener("click",s=>this.slideToByIndicator(s)),this.onSlideEnd(t,()=>this.handleIndicators(t),60);if(this._has(t,"slider-nav-autoplay")){const o=Math.max(Number(t.getAttribute("data-slider-nav-autoplay-interval"))||2500,750);this.autoPlay(t,o,this._has(t,"slider-nav-autopause"))}if(["slider-nav-autohide","slider-nav-animation"].some(o=>this._has(t,o))){const o=Number(t.getAttribute("data-slider-nav-animation-threshold"))||.3;this.setVisibleSlides(t,o)}},setVisibleSlides(t,o=.3){const s=new IntersectionObserver(i=>{for(const e of i)e.target.classList.toggle("slide-visible",e.isIntersecting);t.classList.toggle("slider-item-first-visible",this._c(t).querySelector(":first-child").classList.contains("slide-visible")),t.classList.toggle("slider-item-last-visible",this._c(t).querySelector(":last-child").classList.contains("slide-visible"))},{root:this._c(t),threshold:o});for(const i of this._c(t).querySelectorAll(":scope > *"))s.observe(i)},slide(t,o=!0){const s=this._c(t);if(!s.children.length)return;const i=this._has(t,"slider-nav-page"),e=this._has(t,"slider-nav-noloop"),r=this._has(t,"slider-nav-nodelay"),n=this._rtl(t),l=n?-1:1,d=parseInt(window.getComputedStyle(s).columnGap),h=s.children[0].offsetWidth+d,a=l*(i?s.offsetWidth:h);let c=o?s.scrollLeft+a:s.scrollLeft-a;n?(s.scrollLeft>-1&&!o&&!e&&(c=-(s.scrollWidth-s.offsetWidth)),s.scrollLeft<=-(s.scrollWidth-s.offsetWidth)&&o&&!e&&(c=0)):(s.scrollLeft<1&&!o&&!e&&(c=s.scrollWidth-s.offsetWidth),s.scrollLeft>=s.scrollWidth-s.offsetWidth&&o&&!e&&(c=0)),s.scroll({left:c,behavior:r?"auto":"smooth"})},slideToByIndicator(t){const o=t.target.closest(".slider-indicators > *");if(!o)return;const s=[...o.parentElement.children].indexOf(o),i=o.parentElement.children.length,e=o.closest(".swiffy-slider"),r=this._c(e).children.length;this.slideTo(e,r/i*s)},slideTo(t,o){const s=this._c(t);if(!s.children.length)return;const i=parseInt(window.getComputedStyle(s).columnGap),e=s.children[0].offsetWidth+i,r=this._has(t,"slider-nav-nodelay"),n=this._rtl(t)?-1:1;s.scroll({left:e*o*n,behavior:r?"auto":"smooth"})},onSlideEnd(t,o,s=125){let i;this._c(t).addEventListener("scroll",()=>{clearTimeout(i),i=setTimeout(o,s)},{passive:!0})},autoPlay(t,o,s){const i=setInterval(()=>this.slide(t),o),e=()=>{for(const r of["mouseout","touchend"])t.removeEventListener(r,e);this.autoPlay(t,o,s)};if(s){for(const r of["mouseover","touchstart"])t.addEventListener(r,()=>clearInterval(i),{once:!0,passive:!0});for(const r of["mouseout","touchend"])t.addEventListener(r,e,{once:!0,passive:!0})}return i},handleIndicators(t){if(!t)return;const o=this._c(t),s=o.scrollWidth-o.offsetWidth;if(s===0)return;const i=Math.abs(o.scrollLeft)/s;for(const e of t.querySelectorAll(".slider-indicators")){const r=e.children,n=Math.abs(Math.round((r.length-1)*i));for(const l of r)l.classList.remove("active");r[n].classList.add("active")}}};export{f as swiffyslider};
//# sourceMappingURL=swiffy-slider.js.map