swiper5切換頁面數據動態加載

本文轉載自查看原文 2020-01-03 23:10 2069 js

如果本文幫助到你，本人不勝榮幸，如果浪費了你的時間，本人深感抱歉。
如果有什么錯誤，請一定指出，以免誤導大家、也誤導我。

swiper官方網址：點擊查看

核心方法，在當前Slide切換到另一個Slide時執行：

<script language="javascript"> 
var mySwiper = new Swiper('.swiper-container',{
  on:{
    slideChange: function(){
      alert('改變了，activeIndex為'+this.activeIndex);
    },
  },
})
</script>

詳見：https://www.swiper.com.cn/api/event/405.html

完整代碼：

<!DOCTYPE html>
<html lang="en">
 
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"
    integrity="sha256-pasqAKBDmFT4eHoN2ndd6lN370kFiGUFyTiUHWhU7k8=" crossorigin="anonymous"></script>
  <link rel="stylesheet" href="https://unpkg.com/swiper/css/swiper.min.css">
  <script src="https://unpkg.com/swiper/js/swiper.min.js"> </script>
</head>
 
<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>
</body>
<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) { //如果當前數字大於索引,索引區間范圍1~4
          if (now_ActiveIndex == 4 && this.activeIndex == 1) { //swiper回到第一頁
            $(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;
      },
    },
  })
</script>
<style>
.temp{
  width: 100%;
  height: 200px;
  background: #ccc;
}
.swiper-slide{
  display: block;
  width: 100%;
  height: 100%;
  text-align: center;
  line-height:200px;
  font-size: 30px;
}
</style>
 
</html>

如要模擬異步請求，可使用mySwiper.allowSlideNext，mySwiper.allowSlidePrev，mySwiper.allowTouchMove配合使用。

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 vue 路由切換頁面再次進入更新數據 wxpython tab切換頁面 React應用如何利用redux保存頁面狀態，切換頁面數據不丟失 Swiper5的使用方法 flutter tab切換頁面防止重置小程序左右滑動切換頁面 Echart 切換頁面圖表不展示問題 el-tab 用hover切換頁面 JS實現點擊切換頁面 vue elementui table 切換頁面后select選中數據被清空問題