slendr/dist/slendr.min.js

A responsive & lightweight slider for modern browsers.

!function(t,s){"object"==typeof exports&&"undefined"!=typeof module?s(exports):"function"==typeof define&&define.amd?define(["exports"],s):s((t=t||self).slendr={})}(this,function(t){"use strict";function s(t){return t&&t.__esModule&&Object.prototype.hasOwnProperty.call(t,"default")?t.default:t}function i(t,s){return t(s={exports:{}},s.exports),s.exports}var e=i(function(t,s){Object.defineProperty(s,"__esModule",{value:!0}),s.emitus=function(){var t=[];return{on:function(s,i){s&&i&&t.push([s,i])},off:function(s,i){for(var e=0;e<t.length;e++)s===t[e][0]&&i===t[e][1]&&t.splice(e,1)},emit:function(s,i){for(var e=0;e<t.length;e++)s&&s===t[e][0]&&t[e][1](s,i||null)}}}});s(e);e.Emitus;var n=e.emitus,o=i(function(t,s){Object.defineProperty(s,"__esModule",{value:!0});var i=function(t,s,i){if(t.length){var e=function(n){n<t.length?function(t,s,i){var e=new Image;e.onload=function(t){return i(t.target,s,t)},e.onerror=function(t){return i(null,s,t)},e.src=t}(t[n],n,function(t,i,o){s(t,i,o),e(n+1)}):i&&i(n)};e(0)}};s.Loader=function(t,s,e){i(Array.isArray(t)?t:[t],s,e)}});s(o);var r=o.Loader;function l(t,s){return t&&s?t.querySelector(s):null}function h(t,s){t&&s&&t.addEventListener("click",t=>{t.preventDefault(),s(t)},!1)}function a(t,s){t&&(t.style.setProperty("-webkit-transform",s),t.style.setProperty("-moz-transform",s),t.style.setProperty("transform",s))}function d(t,s="0px"){t&&a(t,`translateX(${s})`)}function c(t){return t.replace(/^\./g,"")}const u={container:".slendr",selector:".slendr-slides > .slendr-slide",animationClass:".slendr-animate",directionNavs:!0,directionNavPrev:".slendr-prev",directionNavNext:".slendr-next",controlNavs:!0,controlNavClass:".slendr-control",controlNavClassActive:".slendr-control-active",slideVisibleClass:".slendr-visible",slideActiveClass:".slendr-active",slideshow:!0,slideshowSpeed:4e3,keyboard:!1};t.Slendr=class{constructor(t){if(this.options=t,this.slidesLength=0,this.current=0,this.timeout=0,this.paused=!0,this.animating=!1,this.containerWidth=0,this.translationDir=0,this.slide=null,this.controlNavActive=null,this.opts=Object.assign({},u,this.options),"string"==typeof this.opts.container){const t=l(document.body,this.opts.container);if(!t)throw new Error("No container found");this.container=t}else this.container=this.opts.container;const s=this.opts.selector.substr(0,this.opts.selector.search(" ")),i=l(this.container,s);if(!i)throw new Error("No slides container found");var e,o;this.slidesContainer=i,this.slides=(e=this.opts.selector,o=i,Array.prototype.slice.call((o||document.body).querySelectorAll(e))),this.slidesLength=this.slides.length,this.containerWidth=this.container.offsetWidth,this.opts.animationClass=c(this.opts.animationClass),this.opts.slideActiveClass=c(this.opts.slideActiveClass),this.opts.slideVisibleClass=c(this.opts.slideVisibleClass),this.opts.controlNavClass=c(this.opts.controlNavClass),this.opts.controlNavClassActive=c(this.opts.controlNavClassActive),this.emitter=n(),this.initialize()}prev(){this.animating||this.goTo(0)}next(){this.animating||this.goTo(1)}play(){this.paused&&(this.opts.slideshow=!0,this.slideshow(),this.emitter.emit("play",[this.current]))}pause(){this.opts.slideshow&&(clearTimeout(this.timeout),this.paused=!0,this.animating=!1,this.opts.slideshow=!1,this.emitter.emit("pause",[this.current]))}move(t){this.goToBy(t)}on(t,s){this.emitter.on(t,s)}off(t,s){this.emitter.off(t,s)}initialize(){this.slidesLength<2?1===this.slidesLength&&(this.slides[0].setAttribute("data-slide-index","0"),this.showSlideBy(0)):(this.container.setAttribute("data-slides-length",this.slidesLength.toString()),this.showSlideBy(0),this.addEvents(),this.opts.controlNavs&&(this.controlNavActive=this.controlNavs(),this.controlNavActive&&this.controlNavActive(0)),this.opts.directionNavs?this.directionNavs():this.opts.directionNavs=!1,this.opts.keyboard&&this.keyboard(),this.loadImages(),this.slideshow())}goToBy(t){!this.animating&&this.current!==t&&t>=0&&t<this.slidesLength&&this.goTo(this.current-t<0?1:0,t)}goTo(t,s=-1){this.animating=!0,window.clearTimeout(this.timeout),this.showSlide(this.slides[this.current]),-1!==s?this.current=s:(this.current=1===t?this.current+1:this.current-1,this.current>this.slidesLength-1&&(this.current=0),this.current<0&&(this.current=this.slidesLength-1)),this.slide=this.slides[this.current],this.showSlide(this.slide),this.slidesContainer.classList.add(this.opts.animationClass),d(this.slidesContainer,(1===t?"-":"")+this.containerWidth+"px"),d(this.slide,(1===t?"":"-")+this.containerWidth+"px"),this.controlNavActive&&this.controlNavActive(this.current),this.translationDir=t}slideshow(){this.opts.slideshow&&(this.paused=!1,window.clearTimeout(this.timeout),this.timeout=window.setTimeout(()=>this.next(),this.opts.slideshowSpeed))}showSlideBy(t){for(let s=0;s<this.slidesLength;s++)this.showSlide(this.slides[s],t===s,t===s)}showSlide(t,s=!0,i=!1){s?t.classList.add(this.opts.slideVisibleClass):t.classList.remove(this.opts.slideVisibleClass),i?t.classList.add(this.opts.slideActiveClass):t.classList.remove(this.opts.slideActiveClass)}background(t){const s=t.getAttribute("data-slide-src");s&&(t.style.setProperty("background-image",`url('${s}')`),t.removeAttribute("data-slide-src"))}loadImages(){const t=this.slides,s=[];for(let i=0;i<this.slidesLength;i++){t[i].setAttribute("data-slide-index",i.toString());const e=t[i].getAttribute("data-slide-src")||null;e&&s.push(e)}s.length&&r(s,(s,i)=>{s&&(this.emitter.emit("image:load",[s,i,this.slides[i]]),this.background(t[i]))},t=>this.emitter.emit("image:completed",[t]))}keyboard(){document.addEventListener("keyup",({which:t})=>{37===t&&this.prev(),39===t&&this.next()},!1)}onTransitionEnd(){this.animating=!1,this.slidesContainer.classList.remove(this.opts.animationClass),a(this.slidesContainer,"none"),a(this.slides[this.current],"none"),this.showSlideBy(this.current),this.emitter.emit("move",[this.translationDir,this.current,this.slide]),this.emitter.emit(this.translationDir?"next":"prev",[this.current,this.slide]),this.slideshow()}addEvents(){window.addEventListener("resize",()=>this.containerWidth=this.container.offsetWidth,!1),this.slidesContainer.addEventListener("transitionend",()=>this.onTransitionEnd(),!1)}directionNavs(){const t=l(this.container,this.opts.directionNavPrev),s=l(this.container,this.opts.directionNavNext);t&&h(t,()=>this.prev()),s&&h(s,()=>this.next())}controlNavs(){const t=l(this.container,`.${this.opts.controlNavClass}`);if(!t)return null;for(;t.firstChild;)t.removeChild(t.firstChild);const s=[],i=document.createElement("ul");let e=0;for(;e<this.slidesLength;){const t=this.createBullet(i,e++);t&&s.push(t)}return t.appendChild(i),t=>{if(this.slidesLength>1){let i=0;for(;i<s.length;)s[i++].classList.remove(this.opts.controlNavClassActive);s[t||0].classList.add(this.opts.controlNavClassActive)}}}createBullet(t,s){const i=document.createElement("a");return h(i,()=>this.goToBy(s)),t.appendChild(i),i}},Object.defineProperty(t,"__esModule",{value:!0})});