preface

Since this project needs to use the wheel map, and the compatibility of the project should be as friendly as possible, I chose to use the version of Swiper 2.x. The default rotation effect of the official website is seamless rolling rotation, while my project needs the effect of fading in and out. Swiper 3.X has this effect, while Swiper 2.X needs to be implemented by itself. I found that there were very few articles on the Internet to achieve this effect, so I wrote down my code for the reference of friends who need it, and the big guy automatically ignored….. hahaha

The following code

1. First, we need to introduce swiper library and plug-in that can set the effect of rotation

    <script src="Idangerous. Swiper2.7.6. Min. Js." "></script>
    <script src="idangerous.swiper.progress.min.js"></script>
Copy the code

2. Create a swiper instance and start the plug-in.

    var mySwiper1 = new Swiper('.swiper-container', {
    autoplay: 5000.loop: true.pagination: '.pagination'.paginationClickable: true.initialSlide :0.observer:true.observeParents:true.// Enable the Smooth Progress plugin when the progress parameter is set to true
    progress:true.// Enabling the Smooth Progress plugin adds a callback function onProgressChange
    onProgressChange: function(swiper){    
    // The plugin adds a progress attribute to each slide and a property attribute to swiper
        for (var i = 0; i < swiper.slides.length; i++){    
          var slide = swiper.slides[i]; 
          // Implement some effects according to slide's Progress property
          var progress = slide.progress;    
          var translate = progress*swiper.width;      
          var opacity = 1 - Math.min(Math.abs(progress),1);    
          slide.style.opacity = opacity;    
          swiper.setTransform(slide,'translate3d('+translate+'px, 0, 0)'); }},// Swiper's callback function executes when the slider is touched
      onTouchStart:function(swiper){    
        for (var i = 0; i < swiper.slides.length; i++){    
          swiper.setTransition(swiper.slides[i], 0); }},// Swiper's callback function is executed every time swiper starts animation, often used in the Swiper Smooth Progress plugin
      onSetWrapperTransition: function(swiper, speed) {    
        for (var i = 0; i < swiper.slides.length; i++){ swiper.setTransition(swiper.slides[i], speed); }}});Copy the code