Slider 3: влево-вправо и точки

slider.ejs

<div class="slider">
  <div class="slides">
    <div class="slide">
      <p>слайд 1</p>
    </div>
    <div class="slide" style="background: #eee">
      <p>слайд 2</p>
    </div>
    <div class="slide">
      <p>слайд 3</p>
    </div>
    <div class="slide" style="background: #eee">
      <p>слайд 4</p>
    </div>
  </div>
  <div class="controls">
    <button class="prev"></button>
    <button class="next"></button>
  </div>
  <div class="dots">
    <div class="dot dot-active"></div>
    <div class="dot"></div>
    <div class="dot"></div>
    <div class="dot"></div>
  </div>
</div>

slider.js

// Слайдер запускается так: Slider.init()

var Slider = (function() {
  return {

    init: function() {
      this.cache();
      this.settings();
    },



    cache: function() {
      this.sliders = document.getElementsByClassName("slider");

      // Так как слайдеров может быть несколько, достаем кнопки каждого из них
      if (this.sliders) {
        this.butsPrev = [];
        this.butsNext = [];
        this.dots = [];

        var i;
        for (i=0; i < this.sliders.length; i++) {
          // Достаем кнопки "Назад"-"Вперед"
          var prev = this.sliders[i].getElementsByClassName("prev")[0];
          var next = this.sliders[i].getElementsByClassName("next")[0];
          if (prev) this.butsPrev.push(prev);
          if (next) this.butsNext.push(next);

          // Достаем кнопки переключения по слайдам
          var dots = this.sliders[i].getElementsByClassName("dot");
          var k;
          for (k=0; k < dots.length; k++) {
            this.dots.push(dots[k]);
          }
        }

        this.bindEvents();
      }
    },



    settings: function() {
      this.duration = 800;
      this.timing = "ease-in-out";
    },



    bindEvents: function() {
      var self = this;

      var i;
      for (i=0; i < this.butsNext.length; i++) {
        this.butsNext[i].addEventListener("click", function(e) {
          self.setSlide(this, "next");
        });
      }

      var k;
      for (k=0; k < this.butsPrev.length; k++) {
        this.butsPrev[k].addEventListener("click", function(e) {
          self.setSlide(this, "prev");
        });
      }

      var l;
      for (l=0; l < this.dots.length; l++) {
        this.dots[l].addEventListener("click", function() {
          self.setSlide(this, "dot");
        });
      }
    },



    setSlide: function(obj, action) {
      var slides = obj.parentNode.parentNode.children[0];

      // Используем slides, а не this, для одновременного переключения нескольких слайдеров
      if (slides.isOn) return;
      slides.isOn = true;

      slides.current = slides.current || 0;

      switch(action) {
        case 'dot':
          this.dotSlide(slides, obj);
          break;
        case 'prev':
          this.prevSlide(slides);
          break;
        default:
          this.nextSlide(slides);
      }
    },



    nextSlide: function(slides) {
      slides.next = slides.current + 1;
      if (slides.next >= slides.children.length) { slides.next = 0; }
      this.animateToLeft(slides);
    },



    prevSlide: function(slides) {
      slides.next = slides.current - 1;
      if (slides.next < 0) { slides.next = slides.children.length - 1; }
      this.animateToRight(slides);
    },


    dotSlide: function(slides, obj) {
      // определяем номер точки по счету
      var dots = obj.parentNode;
      var i, num, dotPrev;
      for (i=0; i < dots.children.length; i++) {
        if (obj === dots.children[i]) {
          slides.next = i;
          break;
        }
      }

      if (slides.next >= slides.children.length) { slides.next = 0; }

      if (slides.next === slides.current) {
        slides.isOn = false;
        return;
      }

      if (slides.next > slides.current) {
        this.animateToLeft(slides);
      } else {
        this.animateToRight(slides);
      }
    },



    // Анимация переключения слайда справа-налево
    animateToLeft: function(slides) {
      this.dotStyle(slides);

      var fn = function(progress) {
        slides.children[slides.current].style.left = 0 - 100 * progress + "%";
        slides.children[slides.next].style.left = 100 - 100 * progress + "%";
        if (progress >= 1) {
          slides.current = slides.next;
          slides.isOn = false;
        }
      };
      AnimHandler.init(fn, this.duration, this.timing);
    },



    // Анимация переключения слайда слева-направо
    animateToRight: function(slides) {
      this.dotStyle(slides);

      var fn = function(progress) {
        slides.children[slides.current].style.left = 0 + 100 * progress + "%";
        slides.children[slides.next].style.left = -100 + 100 * progress + "%";
        if (progress >= 1) {
          slides.current = slides.next;
          if (slides.current < 0) { slides.current = slides.children.length - 1; }
          slides.isOn = false;
        }
      };
      AnimHandler.init(fn, this.duration, this.timing);
    },



    // добавляем стили точкам
    dotStyle: function(slides) {
      var dots = slides.parentNode.children[2];

      if (dots.children[slides.current]) {
        dots.children[slides.current].classList.remove("dot-active");
      }
      if (dots.children[slides.next]) {
        dots.children[slides.next].classList.add("dot-active");
      }
    }

  }
})();

slider.styl

.slider
  position relative
  width 100%
  height 300px
  border 1px solid black
  .slides
    overflow hidden
    width 100%
    height 100%
    position relative
    .slide
      display block
      position absolute
      width 100%
      height 100%
      top 0
      left 100%
      box-sizing border-box
      overflow hidden
      z-index 3
      transition 0s
      &:first-child
        left 0

  .controls
    user-select none
    button
      width 120px
      height 100%
      background black
      position absolute
      top 0
      z-index 5
      opacity 0
      border none
      &:hover
        opacity .4
    .prev
      left 0
    .next
      right 0

  .dots
    position absolute
    bottom 10%
    text-align center
    z-index 4
    width 100%
    user-select none
    .dot
      width 10px
      height 10px
      border 2px solid black
      background white
      border-radius 50%
      display inline-block
      margin-right 8px
      transition .15s
      &:last-child
        margin-right 0
      &:hover
        cursor pointer
    .dot-active
      background green