Slider 3: с эффектом масштабирования

slider-zoom.ejs

//- Example: https://jsfiddle.net/8tfrwnyo/4/

<div class="slider">
  <div class="slides">
    <div class="slide">
      <div class="slide-bg" style="background-image: url(http://loststore.ru/pc_games/watch-dogs-2/1.jpg)">
        <p>Слайд 1</p>
      </div>
      <div class="slide-bg" style="background-image: url(http://loststore.ru/pc_games/watch-dogs-2/2.jpg)">
        <p>Слайд 2</p>
      </div>
      <div class="slide-bg" style="background-image: url(http://loststore.ru/pc_games/watch-dogs-2/3.jpg)">
        <p>Слайд 3</p>
      </div>
      <div class="slide-bg" style="background-image: url(http://loststore.ru/pc_games/watch-dogs-2/4.jpg)">
        <p>Слайд 4</p>
      </div>
    </div>
  </div>
  <div class="controls">
    <button class="prev"></button>
    <button class="next"></button>
  </div>
</div>

slider-zoom.jade

//- Example: https://jsfiddle.net/8tfrwnyo/4/

.slider
  .slides
    .slide
      .slide-bg(style="background-image: url(http://loststore.ru/pc_games/watch-dogs-2/1.jpg)")
      p Слайд 1
    .slide
      .slide-bg(style="background-image: url(http://loststore.ru/pc_games/watch-dogs-2/2.jpg)")
      p Слайд 2
    .slide
      .slide-bg(style="background-image: url(http://loststore.ru/pc_games/watch-dogs-2/3.jpg)")
      p Слайд 3
    .slide
      .slide-bg(style="background-image: url(http://loststore.ru/pc_games/watch-dogs-2/4.jpg)")
      p Слайд 4
  .controls
    button.prev
    button.next

slider-zoom.js

// Слайдер с масштабирование картинки
// Тайминги и анимация настраивается в CSS в .slide и .slide-bg
// Слайдер запускается так: Slider.init()

var Slider = (function() {
  return {

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



    cache: function() {
      this.sliders = document.getElementsByClassName("slider");
      if (this.sliders) {
        this.butsPrev = [];
        this.butsNext = [];
        var i;
        for (i=0; i < this.sliders.length; i++) {
          this.butsPrev.push( this.sliders[i].getElementsByClassName("prev")[0] );
          this.butsNext.push( this.sliders[i].getElementsByClassName("next")[0] );
        }

        this.bindEvents();
      }
    },



    bindEvents: function() {
      var self = this;

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

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

      this.start();
      this.timer();
    },



    // Запускаем отдаление картинки при перезагрузке страницы
    start: function() {
      var i;
      for (i=0; i < this.sliders.length; i++) {
        var bg = this.sliders[i].children[0].children[0].children[0];
        bg.style.transform = "scale(0.9)";
      }
    },



    timer: function() {
      var self = this;

      var fn = function() {
        var i;
        for (i=0; i < self.butsNext.length; i++) {
          self.nextSlide(self.butsNext[i]);
        }
      }
      this.interval = setInterval(fn, 3000);
    },



    nextSlide: function(butNext) {
      var slides = butNext.parentNode.parentNode.children[0];

      slides.current = slides.current || 0;
      slides.next = slides.current + 1;
      if (slides.next >= slides.children.length) { slides.next = 0; }

      this.animation(slides, slides.current, slides.next);

      slides.current += 1;
      if (slides.current >= slides.children.length) { slides.current = 0; }

    },



    prevSlide: function(butPrev) {
      var slides = butPrev.parentNode.parentNode.children[0];

      slides.current = slides.current || 0;
      slides.next = slides.current - 1;
      if (slides.next < 0) { slides.next = slides.children.length - 1; }

      this.animation(slides, slides.current, slides.next);

      slides.current -= 1;
      if (slides.current < 0) { slides.current = slides.children.length - 1; }
    },



    animation: function(slides, current, next) {
      // Достаем фоновую картинку
      var bgCur = slides.children[slides.current].children[0];
      var bgNext = slides.children[slides.next].children[0];

      slides.children[slides.current].style.opacity = 0;
      slides.children[slides.current].style.pointerEvents = "none";
      slides.children[slides.next].style.opacity = 1;
      slides.children[slides.next].style.pointerEvents = "auto";

      bgCur.style.transform = "scale(1)";
      bgNext.style.transform = "scale(0.9)";
    }

  }
})();

slider-zoom.styl

// SLIDER
////////////////////////
.slider
  position relative
  width 100%
  height 300px
  border 1px solid black
  overflow hidden
  cf()
  .slides
    .slide
      display block
      position absolute
      width 100%
      height 100%
      top 0
      left 0
      box-sizing border-box
      overflow hidden
      z-index 50
      background white
      transition .5s ease-in
      opacity 0
      &:first-child
        z-index 51
        opacity 1
      .slide-bg
        background-position center
        background-size cover
        width 120%
        height 116%
        position absolute
        transition 3.3s ease
        top -8%
        left -10%

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