The implementation method of swiper's Dynamic Sliding content, and swiper's Dynamic Sliding content

The implementation method of swiper's Dynamic Sliding content, and swiper's Dynamic Sliding content

Assume that 1 is displayed, 1 is sliding to the left, and 1 is sliding to the right.

Add the following code under the body

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

Reference the css and js scripts of swiper (the current version is 4.x or later)

Add js script

Var now_ActiveIndex = 2; //, // var tempSwiper = new Swiper ('. swiper-container.temp ', {initialSlide: 1, loop: true, speed: 400, on: {slideChange: function (swiper) {// executed when the current Slide is switched (activeIndex changed) 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 {// last 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 {// The next var act_number = pre_number + 1; $ (this. slides [this. activeIndex]). text (act_number) ;}} now_ActiveIndex = this. activeIndex ;},},})

Initial Value:

Slide three times to the left:

Slide to the right once

This test is mainly used to change the sliding left and right of the back calendar from January 1, January to January 1, January.

Summary

The above section describes how swiper dynamically changes the sliding content. I hope it will be helpful to you. If you have any questions, please leave a message and I will reply to you in a timely manner. Thank you very much for your support for the help House website!