JSFiddle - React, Tailwind, and code Playground

by Johan Muller

HTML

<script src="http://www.idangero.us/sliders/swiper/js/idangerous.swiper.js"></script>
<script src="http://www.idangero.us/sliders/swiper/js/idangerous.swiper.progress.js"></script>
<div class="swiper-container">
    <div class="swiper-wrapper">
        <div class="swiper-slide">
            <img src="http://newlife.local/img/slider/slider_1.jpg" />
        </div>
        <div class="swiper-slide">
            <img src="http://newlife.local/img/slider/slider_4.jpg" />
        </div>
        <div class="swiper-slide">
            <img src="http://newlife.local/img/slider/slider_3.jpg" />
        </div>
    </div>
</div>
<div class="paginator"></div>

SCSS

.swiper-container {
    width: 800px;
    height: 200px;
    background: #eee;
    overflow: hidden;
    .swiper-slide {
        float: left;
        overflow: hidden;
    }
    img {
        width: 100%;
    }
}
.paginator {
    margin-top: 30px;
    display: block;
    background: yellow;
    width: 200px;
    overflow: hidden;
    span {
        display: block;
        float: left;
        margin-right: 10px;
        width: 30px;
        height: 30px;
        background: red;
        border: 3px solid red;
    }
    .swiper-active-switch {
        border: 3px solid blue;
    }
}

JavaScript

var mySwiper = $('.swiper-container').swiper({
      mode: 'horizontal',
      loop: false,
      speed: 750,
      autoplay: 3000,
      grabCursor: true,
      pagination: '.paginator',
      createPagination: true,
      paginationClickable: true,
      progress:true,
      onProgressChange: function(swiper){
        for (var i = 0; i < swiper.slides.length; i++){
          var slide = swiper.slides[i];
          var progress = slide.progress;
          var translate, boxShadow;
          if (progress>0) {
            translate = progress*swiper.width;  
            boxShadowOpacity = 0;
          }
          else {
            translate=0; 
            boxShadowOpacity = 1  - Math.min(Math.abs(progress),1);
          }
          slide.style.boxShadow='0px 0px 10px rgba(0,0,0,'+boxShadowOpacity+')';
          swiper.setTransform(slide,'translate3d('+(translate)+'px,0,0)');
        }
      },
      onTouchStart:function(swiper){
        for (var i = 0; i < swiper.slides.length; i++){
          swiper.setTransition(swiper.slides[i], 0);
        }
      },
      onSetWrapperTransition: function(swiper) {
        for (var i = 0; i < swiper.slides.length; i++){
          swiper.setTransition(swiper.slides[i], swiper.params.speed);
        }
      }

  });