vue使用swiper组件

第一步安装 

npm i swiper@4

第二步在使用的页面引入

import 'swiper/dist/js/swiper'
import 'swiper/dist/css/swiper.css'
import Swiper from "swiper"

第三步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>

第四步初始化swiper

 mounted() {
    new Swiper(".swiper-container", {
      direction: "horizontal",
      autoplay: {
        //自动开始
        delay: 2500, //时间间隔
        disableOnInteraction: false //*手动操作轮播图后不会暂停*
      },
      loop: true, // 循环模式选项
      //分页器
      pagination: {
        el: ".swiper-pagination",
        clickable: true // 分页器可以点击
      },
      //前进后退按钮
      navigation: {
        nextEl: ".swiper-button-next",
        prevEl: ".swiper-button-prev"
      },
      //滚动条
      scrollbar: {
        el: ".swiper-scrollbar"
      }
    })
  }

这样就可以使用成功了,大家修改一下样式即可,现在一次轮播只能显示一条数据,如果要显示多条怎么办呢,直接看下边完整的demo!

<template>
  <div class="swiper-container" :options="swiperOption">
    <div class="swiper-wrapper">
      <div class="swiper-slide" v-for="(item, index) in page" :key="index">
        <div v-for="(page, index) in item" :key="index">
          <p>{{page.name}}</p>
        </div>
      </div>
    </div>
    <div class="swiper-pagination"></div>
  </div>
</template>
<script>
import "swiper/dist/js/swiper";
import "swiper/dist/css/swiper.css";
import Swiper from "swiper";
export default {
  data() {
    return {
      swiperOption: {},
      list: [
        { name: "科比" },
        { name: "詹姆斯" },
        { name: "库里" },
        { name: "杜兰特" }
      ],
    };
  },
  computed: {
    page() {
      let pages = []
      this.list.forEach((item, index) => {
        let idx = Math.floor(index / 2);
        if (!pages[idx]) pages[idx] = [];
        pages[idx].push(item);
      })
      return pages
    },
  },
  mounted() {
    new Swiper(".swiper-container", {
      direction: "horizontal",
      autoplay: {
        //自动开始
        delay: 2500, //时间间隔
        disableOnInteraction: false //*手动操作轮播图后不会暂停*
      },
      loop: true, // 循环模式选项
      //分页器
      pagination: {
        el: ".swiper-pagination",
        clickable: true // 分页器可以点击
      },
      //前进后退按钮
      navigation: {
        nextEl: ".swiper-button-next",
        prevEl: ".swiper-button-prev"
      },
      //滚动条
      scrollbar: {
        el: ".swiper-scrollbar"
      }
    })
  }
};
</script>

<style lang="scss" scoped>
* {
  margin: 0;
  padding: 0;
}
.swiper-container {
  width: 500px;
  height: 300px;
  border: 1px solid red;
}
</style>

简单的效果图