vue 使用 swiper 实现轮播的那些事

╰半橙微兮° 2022-12-22 11:23 180阅读 0赞

首先运行 npm下载

npm install swiper --save-dev

在需要用到的页面中

<template>
       <div class="banner">
          <div class="swiper-container">
            <div class="swiper-wrapper">
              <div class="swiper-slide">
                <img src="lun.png" alt="" />
              </div>
              <div class="swiper-slide">
                <img src="lun.png" alt="" />
              </div>
              <div class="swiper-slide">
                <img src="lun.png" alt="" />
              </div>
            </div>
            
            <div class="swiper-pagination"></div>
            
            //自定义左右切换按钮“ swiper_btn ”
            <div
              class="swiper-button-prev swiper_btn"
              :style="{ backgroundImage: 'url(' + bg + ')' }"
            ></div>
            <div
              class="swiper-button-next swiper_btn"
              :style="{ backgroundImage: 'url(' + bg1 + ')' }"
            ></div>
          </div>
        </div>
     </template>
    
    <script>
    import Swiper from "swiper";
    export default { 
      data() { 
        return { 
        //自定义左右切换按钮
          bg: require("left.png"),
          bg1: require("right.png"),
        };
      },
      mounted() { 
        var mySwiper = new Swiper(".swiper-container", { 
          autoplay: 2000,
          loop: true,
          // 如果需要分页器
          pagination: ".swiper-pagination", //分页
          // 如果需要前进后退按钮
          prevButton: ".swiper-button-prev",
          nextButton: ".swiper-button-next",
        });
      },
    };
    </script>
    
    <style scoped>
    @import "swiper/dist/css/swiper.min.css";
    .swiper-slide > img { 
      width: 100%;
    }
    //自定义左右切换按钮
    .swiper_btn { 
      width: 92px;
      height: 92px;
      background-size: 100% 100%;
    }
    </style>

如果想要展示多张图片，在 munted 里面添加参数即可，代码如下：

mounted() { 
        var mySwiper = new Swiper(".swiper-container", { 
          autoplay: 2000,
          loop: true,
          //这里是显示3张，改变数字值，就可以改变显示的张数
          slidesPerView: 3,
          // 图片之间的距离
          spaceBetween: 30,
          // 如果需要分页器
          pagination: ".swiper-pagination", //分页
          // 如果需要前进后退按钮
          prevButton: ".swiper-button-prev",
          nextButton: ".swiper-button-next",
        });
      },

如果轮播不出来的话，可以安装下 npm install vue-awesome-swiper --save-dev 试一下