Swiper介紹及使用

1. Swiper介紹及使用

https://www.swiper.com.cn/

1. 概念及使用

• 概念

  Swiper是一款專門用來實現滑動效果的插件(適用於移動端和pc端)
  ​
  https://www.swiper.com.cn/

• 基本使用

  • 下載

  • 引入文件 swiper-bundle.min.js和swiper-bundle.min.css

    1. swiper-bundle.min.js和swiper-bundle.min.css  文件默認在 package 文件夾中
    2. 可以將文件單獨拷貝使用

  • 設置html結構

    <div class="swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide">Slide 1</div>
            <div class="swiper-slide">Slide 2</div>
            <div class="swiper-slide">Slide 3</div>
        </div>
        <!-- 如果需要分頁器 -->
        <div class="swiper-pagination"></div>
        
        <!-- 如果需要導航按鈕 -->
        <div class="swiper-button-prev"></div>
        <div class="swiper-button-next"></div>
        
        <!-- 如果需要滾動條 -->
        <div class="swiper-scrollbar"></div>
    </div>

  • 初始化

    <script>        
      var mySwiper = new Swiper ('.swiper-container', {
        direction: 'vertical', // 垂直切換選項
        loop: true, // 循環模式選項
        
        // 如果需要分頁器
        pagination: {
          el: '.swiper-pagination',
       },
        
        // 如果需要前進后退按鈕
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev',
       },
        
        // 如果需要滾動條
        scrollbar: {
          el: '.swiper-scrollbar',
       },
     })        
      </script>

2. 其他配置介紹

• 查看API文檔

• 具體配置選項介紹

  var mySwiper = new Swiper('.swiper-container',{
      //設置默認顯示第幾個, 從0開始
   initialSlide :2,
      //設置滑動方向, 默認horizontal水平顯示, vertical代表垂直顯示
      direction : 'vertical',
      //設置切換速度單位毫秒
      speed: 300,
      //設置是否循環切換, false不循環, true循環
      loop : true,
      //是否自動切換
      autoplay: true,
      //設置切換效果 'fade', 'cube'
      effect: 'cube',
      //設置分頁
      pagination: {
          el: '.swiper-pagination',
          //點擊小圓點切換
          clickable :true,
     },
      //顯示上一頁,下一頁按鈕
      navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
     },
      // 添加滾動條
      scrollbar: {
         el: '.swiper-scrollbar',
     },
      // 設置通過鍵盤控制
      keyboard : true,
  })

• 樣式設置

  .swiper-container{
      --swiper-theme-color: #ff6600;/* 設置Swiper風格 */
      --swiper-navigation-color: #00ff33;/* 單獨設置按鈕顏色 */
      --swiper-navigation-size: 30px;/* 設置按鈕大小 */
      --swiper-pagination-color: #00ff33;/* 設置分頁器顏色 */
  }

•