Swiper custom slides transform effect

index.html

<!-- Swiper -->
<div class="swiper-container">
  <div class="swiper-wrapper">
    <div class="swiper-slide">
      <div class="slide-inner" style="background-image: url('http://cs412624.vk.me/v412624691/4117/RWBNZL6CLtU.jpg')"></div>      
    </div>
    <div class="swiper-slide">
      <div class="slide-inner" style="background-image: url('http://cs412624.vk.me/v412624691/41ad/atM6w55Z9Xg.jpg')"></div>
    </div>
    <div class="swiper-slide">
      <div class="slide-inner" style="background-image: url('http://cs412624.vk.me/v412624691/415d/X7YuVilSl4k.jpg')"></div>
    </div>
  </div>
</div>

script.js

var interleaveOffset = -.5;

var interleaveEffect = {
  
  onProgress: function(swiper, progress){
    for (var i = 0; i < swiper.slides.length; i++){
      var slide = swiper.slides[i];
      var translate, innerTranslate;
      progress = slide.progress;
      
      if (progress > 0) {
        translate = progress * swiper.width;
        innerTranslate = translate * interleaveOffset;        
      }
      else {        
        innerTranslate = Math.abs( progress * swiper.width ) * interleaveOffset;
        translate = 0;
      }

      $(slide).css({
        transform: 'translate3d(' + translate + 'px,0,0)'
      });

      $(slide).find('.slide-inner').css({
        transform: 'translate3d(' + innerTranslate + 'px,0,0)'
      });
    }
  },

  onTouchStart: function(swiper){
    for (var i = 0; i < swiper.slides.length; i++){
      $(swiper.slides[i]).css({ transition: '' });
    }
  },

  onSetTransition: function(swiper, speed) {
    for (var i = 0; i < swiper.slides.length; i++){
      $(swiper.slides[i])
        .find('.slide-inner')
        .andSelf()
        .css({ transition: speed + 'ms' });
    }
  }
};

var swiperOptions = {
  loop: true,
  speed: 1000,
  grabCursor: true,
  watchSlidesProgress: true,
  mousewheelControl: true
};

swiperOptions = $.extend(swiperOptions, interleaveEffect);

var swiper = new Swiper('.swiper-container', swiperOptions);

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.3.0/js/swiper.min.js"></script>

style.css

body {
  background: #eee;
  font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
  font-size: 14px;
  color:#000;
/*   background: #808489; */
  background: #404449;
  margin: 0;
  padding: 0;
}
.swiper-container {
/*   width: 500px; */
  height: calc(100vh - 120px);
  margin: 60px;
}
.swiper-slide {
  overflow: hidden;
}

.slide-inner{
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  background-size: cover;
  background-position: center;
}

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.3.0/css/swiper.min.css" rel="stylesheet" />

swiper-custom-slides-transform-effect.markdown

Swiper custom slides transform effect

A Pen by Dmitry Udovichenko on CodePen.

License.