swiper

Miao-MingYu發表於2024-03-28

https://swiper.com.cn/

首先引入css和js 針對不同的技術棧進行引入（可以直接下載js和css 或者引入cdn）

溫馨提示 這裡不建議用CDN 練手的還行 CDN很辣雞

這裡示例用原生html+css

建立的時候需要看好版本 低版本的盒子型別不一樣 不要搞錯

一個頁面中引用多個Swiper，可以給每個容器加上ID或Class區分，要保留預設的類名.swiper ！！

<div class="swiper" id="swiper1">....</div>
<div class="swiper" id="swiper2">....</div>
<div class="swiper" id="swiper3">....</div>

<!-- 這裡的class=swiper 這個swiper不能動 可以追加 -->
<div class="swiper" id="自定義類名防止衝突">
  <div class="swiper-wrapper">
    <div class="swiper-slide">內容1</div>
    <div class="swiper-slide">內容2</div>
    <div class="swiper-slide">內容3</div>
  </div>
  <div class="swiper-pagination"></div>    // 分頁器
  <div class="swiper-button-prev"></div>   // 箭頭上一個
  <div class="swiper-button-next"></div>   // 箭頭下一個
</div>

  let swiper1 = new Swiper('#swiper1');
  let swiper2 = new Swiper('#swiper2');
  let swiper3 = new Swiper('#swiper3');
<link rel="stylesheet" href="./swiper-bundle.min.css">

<script src="./swiper-bundle.min.js"></script>

<!-- 這裡可以直接用id來命名  建立多個swiper -->
<script type="text/javascript">
  let mySwiper = new Swiper('#swiper1', {
    direction: 'horizontal', // 橫向切換選項
  })
  let mySwiper1 = new Swiper('#swiper2', {
    direction: 'horizontal', // 橫向切換選項
    loop: true, // 迴圈模式選項
    autoplay: {
      delay: 3000,//3秒自動迴圈
      disableOnInteraction: false,//處理點選左右箭頭後不自動迴圈問題
    },
    // 下方分頁器的。。。  這裡可以用css修改他的樣式
    pagination: {
      //為了防止多個swiper都需要分頁器和左右箭頭 所以在前面再新增一個容器的class
      // 來區分
      el: '.dynamic .swiper-pagination',
      clickable: true,
    },
    // 左右箭頭
    navigation: {
      nextEl: '.dynamic .swiper-button-next',
      prevEl: '.dynamic .swiper-button-prev',
    },
  })
  let mySwiper2 = new Swiper('#swiper3', {
    direction: 'horizontal', // 橫向切換選項
    loop: true, // 迴圈模式選項
    autoplay: {
      delay: 3000,
      disableOnInteraction: false,
    },
    // 如果需要分頁器
    pagination: {
      el: '.dynamics .swiper-pagination',
      clickable: true,
    },
    // 如果需要前進後退按鈕
    navigation: {
      nextEl: '.dynamics .swiper-button-next',
      prevEl: '.dynamics .swiper-button-prev',
    },
  })
</script>
/* 修改左右箭頭樣式 */
  .dynamic .swiper-button-next::after,
  .dynamic .swiper-button-prev::after,
  .dynamics .swiper-button-next::after,
  .dynamics .swiper-button-prev::after {
    font-size: 30px;
    text-align: center;
  }

  .swiper-pagination-bullet {
    width: 30px;
    height: 3px;
    border-radius: 0px;
  }

相關文章