swiffy-slider
Version:
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
3 lines (2 loc) • 1.25 kB
JavaScript
const h={version:"2.1.0",init(t=document.body){for(const s of t.querySelectorAll(".swiffy-slider"))this.initSlider(s)},initSlider(t){t.classList.contains("slider-nav-mousedrag")&&t.addEventListener("mousedown",s=>this.handleMouseDrag(s,t),{passive:!0})},handleMouseDrag(t,s){if(t.target.closest(".slider-nav, .slider-indicators"))return;const e=s.querySelector(".slider-container");if(!e.children.length)return;e.style.cursor="grabbing",s.classList.add("dragging");const r=getComputedStyle(s).direction==="rtl",l=r?-1:1,i=e.scrollLeft,g=t.clientX,a=e.children[0].offsetWidth+parseInt(window.getComputedStyle(e).columnGap),d=a*(e.children.length-1);let o=i,u=null;const f=m=>{const n=m.clientX-g,c=i-n*1.8*l;if(Math.abs(c)>0&&Math.abs(c)<=d)e.scrollLeft=c;else return;n<0?o=d<=Math.abs(i)?i:e.scrollLeft+(a+n*1.8)*l:Math.abs(i)>0&&(o=e.scrollLeft-(a-n*1.8)*l)};e.addEventListener("mousemove",f,{passive:!0}),document.addEventListener("mouseup",()=>{e.removeEventListener("mousemove",f),e.style.cursor=null,r&&o>0&&(o=0),!r&&o<0&&(o=0),e.scroll({left:o,behavior:"smooth"}),clearTimeout(u),u=setTimeout(()=>s.classList.remove("dragging"),550)},{once:!0,passive:!0})}};export{h as swiffysliderextensions};
//# sourceMappingURL=swiffy-slider-extensions.js.map