vue中swiper轮播图

最新推荐文章于 2024-03-21 11:03:35 发布

至_臻

最新推荐文章于 2024-03-21 11:03:35 发布

阅读量240

点赞数 1

分类专栏：前端文章标签： vue.js

本文链接：https://blog.csdn.net/weixin_57163112/article/details/119705581

版权

前端专栏收录该内容

50 篇文章 2 订阅

订阅专栏

一：下载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>