Slider - Pure JavaScript

Slider em JavaScript de 1 a N posições

HTML

<link rel="stylesheet" href="https://rawgit.com/gmoura/slider/master/dist/css/slider.css">
<script src="https://rawgit.com/gmoura/slider/master/dist/js/slider.min.js"></script>
<section id='sl01' class='slider'>
     <div class='wrapper'>
        <div class='mask'>
		    <div class='slide'><h2>slide 1</h2></div>
		    <div class='slide'><h2>slide 2</h2></div>
        <div class='slide'><h2>slide 3</h2></div>
	    </div>
     </div>
    <div class='bullets'></div>
</section>

CSS

.slider{position:relative;width:988px;height:400px;text-align:center;margin:0 auto}.slider .wrapper{border:1px solid #ccc;overflow:hidden}.slider .wrapper .mask{float:left;width:auto}.slider .wrapper .mask .slide{float:left;position:relative;width:988px;height:400px}.slider .wrapper .mask .slide img{position:absolute;left:0;top:0}.slider .wrapper .mask .slide h2{position:relative;width:100%;height:100%;vertical-align:middle;font-family:Arial;font-size:140px;text-align:center;color:#ccc;z-index:1}.slider .bullets{display:inline-block;min-width:100px;height:10px}.slider .bullets .bullet{float:left;width:10px;height:10px;margin:10px;background:#ccc;border:none;cursor:pointer}.slider .bullets .bullet:hover{background:#666}.slider .bullets .bullet.active{background:#666}

JavaScript

function Slider(e){"use strict";var t=0,n=document.getElementById(e),i=n.querySelectorAll(".slide"),r=n.querySelector(".bullets"),s=n.querySelector(".mask"),a=i.length,l=988,c=1e3,o=5e3,u=null,m=null,d="";s.style.width=l*a+"px";for(var f=0;a>f;f+=1)d+="<button class='bullet' id='b_"+f+"'>&nbsp;</button>";return r.innerHTML=d,{init:function(){this.actions(),this.next()},next:function(e){var n,s;return this.hasNext()||this.rewind(),"undefined"!=typeof e?t=e:n=i[t],s=r.childNodes[t],this.clearTimer(),this.move(t),this.mark(s),t+=1,n},rewind:function(){t=0},hasNext:function(){return a>t},mark:function(e){null!=m&&(m.className="bullet"),"bullet"===e.className&&(e.className=e.className+" active"),m=e},move:function(e){var t=l*e*-1,n=this;$(s).stop().animate({marginLeft:t},c,"linear",function(){n.setTimer()})},toggle:function(){var e=this;this.clearTimer(),u=setInterval(function(){e.next()},o)},clearTimer:function(){clearInterval(u)},setTimer:function(){this.toggle()},click:function(e){this.next(e)},actions:function(){var e=this;s.addEventListener("mouseenter",function(){e.clearTimer()},!1),s.addEventListener("mouseleave",function(){e.setTimer()},!1),r.addEventListener("click",function(t){var n=t.target||t.srcElement;if("button"===n.nodeName.toLowerCase()){var i=n.getAttribute("id"),s=/[0-9]/g,a=parseInt(i.match(s),10);e.mark(r.childNodes[a]),e.click(a)}},!1)}}}

var slider = Slider('sl01');
slider.init();