vue中swiper组件的实用

本文介绍如何使用Swiper组件实现自动循环播放的轮播效果,包括组件的导入、样式设置及数据遍历展示。Swiper提供多种预设样式,适用于不同场景。

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

引用swiper组件可以使用各种好看又炫酷的轮播效果,下面来分享下swiper的使用方法
首先引用swiper组建
import Swiper from 'swiper'
import 'swiper/dist/css/swiper.min.css'

再挂载到组件中

   mounted() {
            var mySwiper = new Swiper('.swiper-container', {
                loop: true,
                slidesPerView: 'auto',
                loopedSlides: 10,
            })
        },

这是环路轮播其中的一个效果,在swiper官网上有更多效果样式

   <div class="swiper-container">
                <div class="swiper-wrapper">
                    <div class="swiper-slide" v-for="item in swipers" :key="item.id"><img :src="item.img_url"> 
                    <p class="swiper_title">{{item.title}}</p>          
                    </div>
                    <div class="swiper-slide"></div>
                    <div class="swiper-slide"></div>
                    <div class="swiper-slide"></div>
                    <div class="swiper-slide"></div>
                    <div class="swiper-slide"></div>
                    <div class="swiper-slide"></div>
                    <div class="swiper-slide"></div>
                    <div class="swiper-slide"></div>
                    <div class="swiper-slide"></div>
                </div>
            </div>

只需在第一张图中进行遍历和重构样式就行,后面会根据修改的第一个图的样式自动改变。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值