VUE2中Swiper实现轮播图

最近写项目遇到这样子的轮播图

去找了好几个组件库，发现轮播图都是一张一张的显示，不符合效果，于是找到了这个swiper,

官方文档：

  Swiper中文网-轮播图幻灯片js插件,H5页面前端开发！

里面特别多的效果，还有移动端的。非常nice.

首先 安装 npm i swiper

项目中引入

import Swiper from "swiper";

import "swiper/dist/css/swiper.min.css";

  <div>
    <div style="background-color: #fff">
      <div class="banshi">
        <div class="swiper-container swiper1">
          <div class="swiper-wrapper">
            <div
              v-for="item in 10"
              :key="item.id"
              class="swiper-slide"
              style="
                background-image: url('https://img.zcool.cn/community/01be0755751704000000438393a4c1.jpg@3000w_1l_2o_100sh.jpg');
              "
            >
              <div
                style="
                  display: flex;
                  align-items: center;
                  flex-direction: column;
                "
              >
                <div
                  style="
                    color: #ffffff;
                    font-size: 15px;
                    margin-bottom: 40px;
                    text-align: center;
                  "
                >
                  万里长夜长城长
                </div>
                <div class="add">+</div>
              </div>
            </div>
          </div>
          <div class="swiper-pagination"></div>
          <div class="swiper-button-next"></div>
          <div class="swiper-button-prev"></div>
        </div>
      </div>
    </div>
  </div>

JS 

import Swiper from "swiper";
import "swiper/dist/css/swiper.min.css";
export default {
  name: "GuanwanghHomeThree",

  data() {
    return {};
  },

  mounted() {
    this.getSwiper();
  },

  methods: {
    getSwiper() {
      this.swiper = new Swiper(".swiper-container.swiper1", {
        loop: true, // 无缝
        // autoplay: {
        //   //自动开始
        //   delay: 3000, //时间间隔
        //   disableOnInteraction: false, //*手动操作轮播图后不会暂停*
        // },
        paginationClickable: true,
        slidesPerView: 5, // 一组三个
        spaceBetween: 10, // 间隔
        // 如果需要前进后退按钮
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev",
        },
        // 窗口变化,重新init,针对F11全屏和放大缩小,必须加
        observer: true,
        observeParents: true,
        // 如果需要分页器
        pagination: {
          el: ".swiper-pagination.swiper1",
          clickable: true, // 分页器可以点击
        },
      });
    },
  },
};

CSS

.banshi {
  width: 70%;
  margin: 0 auto;
  // padding: 70px 0;
  .swiper-slide {
    border: 1px solid #d8d8d8;
    position: relative;
    height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 96% 96%;
    cursor: pointer;
    // background-size: contain;
    // background-color: #f7f8fa;
    .add {
      width: 45px;
      height: 45px;
      background-color: #767879;
      opacity: 0.7;
      color: #ffffff;
      font-size: 30px;
      text-align: center;
      line-height: 45px;
    }
  }
}

最后就是如果需要多个轮播的话，记得在这个地方加一个类名

希望对大家有帮助！！