[JavaScript知识库]vue中swiper轮播图

一：下载swiper插件

????????npm install swiper -S

????????如果是vue2.0版本下载 npm install swiper@^5.4.5 -S

二：html

<template>
 <!-- 轮播图 -->
        <div class="swiper-container">
          <div class="swiper-wrapper">
            <div class="swiper-slide"> <img src="../img/home/home_5.jpg" alt="" /></div>
            <div class="swiper-slide"><img src="../img/home/home_02.jpg" alt="" /></div>
          </div>
        </div>
</template>

三：页面引入swiper? js代码

<script>
//引入swiper
import Swiper from "swiper";
export default {
  data() {
    return {};
  },
  mounted() {
    // 轮播图
    this.$nextTick(() => {
      new Swiper(".swiper-container", {
        loop: true, // 循环模式选项
        autoplay: true, //自动轮播
        loopedSlides: 5,
      });
    });
  },
};
</script>