Vue项目，使用vue-awesome-swiper插件（可一次切换多张）

看看电影听听歌

已于 2023-08-07 11:45:46 修改

阅读量4.3k

点赞数 3

CC 4.0 BY-SA版权

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

于 2022-03-31 11:39:35 首次发布

本文链接：https://blog.youkuaiyun.com/xxx_datou/article/details/119914733

一、准备工作

1、下载插件（最新版本的swiper可能会出现未知bug，所以我用的是5.4.5版本）

npm install swiper@5.4.5 vue-awesome-swiper@4.1.1 --save

二、页面使用

1、引入

import 'swiper/css/swiper.css'
import { Swiper, SwiperSlide } from 'vue-awesome-swiper'

2、注册组件

components:{ Swiper, SwiperSlide }

3、在data中设置options

data() {
    return {
      options: {
        pagination: {
          el: ".case-swiper-pagination"
          //区分不同Swiper的组件
        },
        //显示分页
        loop: true,
        //开启循环
        loopedSlides: 6,
        //设置平滑
        slidesPerView: 3,
        //设置能够同时显示的数量（可设置 auto）
        speed: 1000,
        //切换速度

        navigation: {
          prevEl: ".swiper-button-prev2",
          nextEl: ".swiper-button-next2"
        },
        //左右箭头按钮(可自定义)

        // autoplay: false,
        //是否开启自动轮播

        autoplay: {
          delay: 1000,
          stopOnLastSlide: false,