vue 使用swiper

最新推荐文章于 2025-04-28 19:39:21 发布

summer _q

最新推荐文章于 2025-04-28 19:39:21 发布

阅读量281

点赞数 1

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

本文链接：https://blog.youkuaiyun.com/weixin_44237840/article/details/115492376

版权

vue 专栏收录该内容

32 篇文章

订阅专栏

本文介绍如何在Vue项目中使用swiper插件创建轮播图效果。首先通过npm安装swiper@3，然后在页面中引入并注册组件。详细步骤包括安装命令、组件引入及使用方法，并展示了最终实现的轮播图效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

很久没有用过swiper了，最近做一个网站，然后需求使用轮播图，elementui中没有需要的，所以就在swiper插件中找了一下，找到了自己需要的轮播图效果，现在给大家分享一下吧。
swiper：swiper官网
安装：npm install swiper@3 --save-dev

页面引入和注册：

import { swiper, swiperSlide } from "vue-awesome-swiper";
import "swiper/dist/css/swiper.css";

components: {
    swiper,
    swiperSlide,
  },

在这里插入图片描述
使用：

<swiper :options="swiperOption" ref="mySwiper" class="">
          <swiper-slide>
            <img src="../../assets/images/swiper1.png" alt="">
          </swiper-slide>
          <swiper-slide>
            <img src="../../assets/images/swiper2.png" alt="">
          </swiper-slide>
          <swiper-slide>
            <img src="../../assets/images/swiper3.png" alt="">
          </swiper-slide>
          <swiper-slide>
            <img src="../../assets/images/swiper4.png" alt="">
          </swiper-slide>
        </swiper>

swiperOption: {
        loop: true,
        autoplay: {
          delay: 3000,
          stopOnLastSlide: false,
          disableOnInteraction: false,
        },
        slidesPerView: 4,
        spaceBetween: 30,
      },

在这里插入图片描述

效果如下图：