使用swiper4轮播插件

蔚落 2022-09-02 05:15 241阅读 0赞

[https://www.swiper.com.cn/download/index.html][https_www.swiper.com.cn_download_index.html]  
历史版本[https://www.swiper.com.cn/about/us/index.html\#version-different][https_www.swiper.com.cn_about_us_index.html_version-different]  
swiper4：稳定版本4.5.1

"dependencies": { 
            "swiper": "^4.5.1",
        },
        npm install
        npm update

<template>
      <div class="index">
        <div class="swiper-container swiper-index">
          <div class="swiper-wrapper">
            <div class="swiper-slide" v-for="(item, index) in 5" :key="index">
              <div
                style="
                  width: 100%;
                  height: 100%;
                  display: flex;
                  justify-content: center;
                "
              >
                <div style="font-size:50px;color:red;">{ {  index }}</div>
              </div>
            </div>
          </div>
           //如果需要导航按钮
          <div class="pagination"></div>
          //<div class="swiper-button-prev swiper-btn"></div>
          //<div class="swiper-button-next swiper-btn"></div> 
        </div>
      </div>
    </template>
    <script>
    import 'swiper/dist/css/swiper.min.css';
    import Swiper from "swiper/dist/js/swiper.min.js";
    //swiper
    export default { 
      data() { 
        return { };
      },
    
      mounted() { 
        new Swiper(".swiper-index", { 
          autoplay: true,
          loop: true,
          spaceBetween: 10,
          observer: true,
          observeParents: true,
          mousewheel: true,
          pagination: { 
            el: ".pagination",
            clickable: true,
          },
        });
          // new Swiper(".swiper-index", { 
          // autoplay: true,
          // loop: true,
          // spaceBetween: 10,
          // observer: true,
          // observeParents: true,
          // // 如果需要前进后退按钮
          // navigation: { 
          // nextEl: ".swiper-button-next",
          // prevEl: ".swiper-button-prev",
          // },
          // });
      },
    };
    </script>
    <style lang="scss" scoped>
    ::v-deep .swiper-pagination-bullet-active { 
      width: 30px !important;
      border-radius: 10px;
      background-color: #c13232;
    }
    .pagination { 
      display: flex;
      justify-content: center;
      align-items: center;
      margin-top: 35px;
      ::v-deep .swiper-pagination-bullet { 
        width: 10px;
        height: 10px;
        margin: 0 10px;
        border-radius: 10px;
        z-index: 99999999999;
        background-color: #c13232;
      }
    }
    /*::v-deep .swiper-button-prev { width: 60px; height: 120px; background-size: 60px 120px; border: none; outline: none; background-image: url(###); } ::v-deep .swiper-button-next { width: 60px; height: 120px; background-size: 60px 120px; border: none; outline: none; background-image: url(###); }*/
    </style>

[https_www.swiper.com.cn_download_index.html]: https://www.swiper.com.cn/download/index.html
[https_www.swiper.com.cn_about_us_index.html_version-different]: https://www.swiper.com.cn/about/us/index.html#version-different