Swiper8的基本使用

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

本宝宝很开心

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

阅读量994

点赞数

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

本文链接：https://blog.youkuaiyun.com/weixin_44136421/article/details/129368116

版权

vue 专栏收录该内容

6 篇文章

订阅专栏

使用背景

vue3+swiper8
注意：版本不同，属性不同，使用方法不同。
官网：https://swiperjs.com/

安装

 npm install swiper

引入

 import { Swiper, SwiperSlide } from 'swiper/vue';
  import { Autoplay } from 'swiper';
  import 'swiper/css';//样式
  import 'swiper/css/pagination';
  import 'swiper/css/navigation';
  const modules = [Autoplay]; //引入自动播放模块

使用

<swiper
        :slides-per-view="8"
        :loop="state.list.length > 8"
        :space-between="10"
        :direction="'vertical'"
        :observer="true"
        :observe-parents="true"
        :autoplay="{
          delay: 1000,
          disableOnInteraction: false,
          pauseOnMouseEnter: true,
        }"
        :modules="modules"
      >
        <swiper-slide v-for="(item, index) in state.list" :key="index">
        	//轮播的内容
        </swiper-slide>
      </swiper>
      //以上可实现自动播放轮播