How to change sliding content using swiper (detailed tutorial)

Assume that the current display is 1, slide one to the left to decrease by 1, and slide to the right to increase by 1. The following is an example code to explain the implementation method of swiper dynamically changing the sliding content. Friends who are interested should take a look.

Assume that the current display is 1, slide one to the left to decrease by 1, and slide to the right to increase by 1

Add the following code below the body

<p class="swiper-container temp">
 <p class="swiper-wrapper">
  <p class="swiper-slide">
   1
  </p>
  <p class="swiper-slide">
   2
  </p>
  <p class="swiper-slide">
   3
  </p>
 </p>
</p>

Reference the css and js scripts of swiper (currently using version 4.x or above)

Add js script

var now_ActiveIndex=2;//,//当前所在下标
var tempSwiper = new Swiper('.swiper-container.temp', {
 initialSlide: 1,
 loop:true,
 speed:400,
 on: {
  slideChange: function(swiper){//当当前Slide切换时执行(activeIndex发生改变)
   var pre_number=Number($(this.slides[now_ActiveIndex]).text());
   if(now_ActiveIndex>this.activeIndex){
    if(now_ActiveIndex==4&&this.activeIndex==1){
     $(this.slides[this.activeIndex]).text(pre_number);
    }else{//上一个
     var act_number=pre_number-1;
     $(this.slides[this.activeIndex]).text(act_number);
    }
   }else if(now_ActiveIndex<this.activeIndex){
    if(now_ActiveIndex==0&&this.activeIndex==3){
     $(this.slides[this.activeIndex]).text(pre_number);
    }else{//下一个
     var act_number=pre_number+1;
     $(this.slides[this.activeIndex]).text(act_number);
    }
   }
   now_ActiveIndex=this.activeIndex;
  },
 },
})

Initial value:

Swipe left three times:

Swipe right once

This test is mainly for the purpose of sliding the calendar left and right to change the previous month and the next month

The above is what I compiled for everyone. I hope it will be useful in the future. Everyone is helpful.

Related articles:

How to implement page jump in vue and return to the initial position of the original page

How to set up using vue-router The title method of each page

How to solve the problem when Vue.js displays data, the page flashes

ajax requests vue.js to render the page load

How to use ajax to render the page in vue.js

The above is the detailed content of How to change sliding content using swiper (detailed tutorial). For more information, please follow other related articles on the PHP Chinese website!