vue2.0 用swiper实现banner轮播图

第一步：先下载npm

npm install swiper@5.4.5 

 第二步：在main.js引入

import 'swiper/css/swiper.css'

第三步：在vue文件中（要实现banner的vue中）引入

import Swiper from "swiper";

第四步： 下列代码

HTML部分：

  <div class="swiper-container" id="banner">
          <div class="swiper-wrapper" id="banner-list">
            <div class="swiper-slide">
              <img
                class="banner-image"
                src="../assets/homeImage/bannerleft.jpg"
                alt=""
              />
            </div>
            <div class="swiper-slide">
              <img
                class="banner-image"
                src="../assets/homeImage/banners.png"
                alt=""
              />
            </div>
            <div class="swiper-slide">
              <img
                class="banner-image"
                src="../assets/homeImage/banner.jpg"
                alt=""
              />
            </div>
          </div>
        </div>

js部分： 

 mounted() {

      new Swiper(".swiper-container", {

        centeredSlides: true,

        slidesPerView: 1.1, //数值越大，两侧显示的图越大

        spaceBetween: 10,

        loop: true,

        autoplay: 3000,

      })

  },

效果图：

        

另一种实现方式：http://www.easybui.com/demo/#pages/ui_controls/bui.slide_cross