Vue3中使用Swiper6

最新推荐文章于 2025-09-10 02:06:47 发布

原创最新推荐文章于 2025-09-10 02:06:47 发布 · 1.7k 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #html5 #javascript

前端专栏收录该内容

28 篇文章

订阅专栏

本文档介绍了如何在Vue3项目中利用Swiper6搭建轮播图组件。首先强调了开发版本的重要性，特别是Swiper6对Vue3的支持以及不再全面兼容IE浏览器。接着，详细说明了安装Vue最新稳定版和Swiper6的步骤。在代码实现部分，展示了如何配置Swiper组件，包括滑动视图数、间距、导航、循环播放、自动播放等属性，并提供了Vue组件的完整模板和样式。最后，导入了Swiper所需的相关模块和样式文件。

1 开发版本

参考网站（比较慢）：https://swiperjs.com/

重点参考导航中的“Vue“和”Demos"

开发版本很重要，如果版本不对，会很痛苦，并且解决不了问题。
vue: 3.0.0；（swiper6和7支持vue3）
swiper: 6.8.4,（注意：不再全面支持IE）

安装vue最新稳定版
npm install vue@next

安装swiper
npm install swiper@6 --save

注意：很多博客里使用的是Vue2，需要使用下面的包
npm install vue-awesome-swiper --save

2 效果图

3 Vue实现的源代码


<template>

<div>
  <swiper 
    :slidesPerView="4"
    :spaceBetween="30"
    :pagination='{ "clickable": true }'
    :navigation="true"
    :centeredSlides="true"

    :loop="true"

    :autoplay='{
      "delay": 2500,
      "disableOnInteraction": false
    }'

    :effect="'coverflow'"
    :grabCursor="true"
    :coverflowEffect='{
      "rotate": 50,
      "stretch": 0,
      "depth": 100,
      "modifier": 1,
      "slideShadows": true
    }'

    class="swiper">
    <swiper-slide>
      <div class="swiper_item">
        <img src="@/assets/logo.png" />
      </div>
    </swiper-slide>

    <swiper-slide>
      <div class="swiper_item">
        <img src="@/assets/logo.png" />
      </div>
    </swiper-slide>
    <swiper-slide>
      <div class="swiper_item">
        <img src="@/assets/logo.png" />
      </div>
    </swiper-slide>
    <swiper-slide>
      <div class="swiper_item">
        <img src="@/assets/logo.png" />
      </div>
    </swiper-slide>
    <swiper-slide>
      <div class="swiper_item">
        <img src="@/assets/logo.png" />
      </div>
    </swiper-slide>
    <swiper-slide>
      <div class="swiper_item">
        <img src="@/assets/logo.png" />
      </div>
    </swiper-slide>
    <swiper-slide>
      <div class="swiper_item">
        <img src="@/assets/logo.png" />
      </div>
    </swiper-slide>
  </swiper>
</div>
</template>
<script>

// 导入swiper中vue组件
import { Swiper, SwiperSlide } from 'swiper/vue';

// 导入swiper模块
import SwiperCore, {
  // 设置底部小圆点
  Pagination,
  // 设置两边的箭头
  Navigation,
  // 动画效果
  EffectCoverflow,
  // 自动播放
  Autoplay
} from 'swiper';

SwiperCore.use([Pagination, Navigation, EffectCoverflow, Autoplay]);

// 导入swiper的样式，注意此处导入的样式
import "swiper/swiper-bundle.css"

export default {
  components: {
    Swiper,
    SwiperSlide,
  },
  data() {
    return {
    };
  },
  methods: {
    
  }
}
</script>

<style scoped>
.swiper{
  background-color: #CCCCCC;
}
.swiper_item{
  background-color: #FFFFFF;
}
</style>