vue2 使用swiper

原创已于 2023-09-25 11:41:15 修改 · 1.9k 阅读

4 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#vue.js

于 2023-07-12 15:31:28 首次发布

本文介绍了如何在Vue2项目中安装和使用Swiper5，包括通过npm安装，引入JS和CSS文件，修改容器类名以适应Swiper7+的变化，以及配置循环播放、自动播放和分页器功能。

1. 安装swiper, vue2安装 5版本好用一些，7、8版本是vue3

npm i swiper@5

2. 在页面中引入swiper中的JS\CSS

import Swiper from 'swiper'
import 'swiper/css/swiper.min.css'

3. 复制代码放入即可

// 从Swiper7开始，容器默认类名由'.swiper-container'变更为'.swiper'。

<div class="swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide" v-for="(item, index) in photo" :key="index">
                <img :src="item.img" alt="">
            </div>
        </div>
        <div class="swiper-pagination"></div><!--分页器。如果放置在swiper外面，需要自定义样式。-->
    </div>


 mounted() {
        new Swiper('.swiper-container', {
            loop: true,
            autoplay: {
                delay: 3000,
                stopOnLastSlide: false,
                disableOnInteraction: false,
            },
            pagination: {
                el: '.swiper-pagination',
                dynamicBullets: true,
                dynamicMainBullets: 2,
                clickable: true,
            },
        })
}