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.

I little rewrited it to swiper 8.0 & deleted jquerry ;)
You need also to delete bacgkround-image and create inside slide-inner an img ; ex. below:

<div class="swiper-slide">
    <div class="slide-inner">
        <img src="http://cs412624.vk.me/v412624691/4117/RWBNZL6CLtU.jpg" alt="">
    </div>
</div>

I did it so I can use it in Next-Js with <Image/> component ;)

New JS also below:

var interleaveOffset = -0.5;

var swiper = new Swiper(".swiper-container", {
	loop: true,
	speed: 1000,
	grabCursor: true,
	watchSlidesProgress: true,
	mousewheelControl: true,
	on: {
		progress: 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.querySelector("img").style.transform = `translate3d(${translate}px,0,0)`;

				slide.querySelector(".slide-inner").style.transform = `translate3d(${innerTranslate}px,0,0)`;
			}
		},

		touchStart: function (swiper) {
			for (var i = 0; i < swiper.slides.length; i++) {
				swiper.slides[i].querySelector("img").style.transition = "";
			}
		},

		setTransition: function (swiper, speed) {
			for (var i = 0; i < swiper.slides.length; i++) {
				swiper.slides[i].querySelector(".slide-inner").style.transition = `${speed}ms`;
				swiper.slides[i].querySelector("img").style.transition = `${speed}ms`;
			}
		},
	},
});