投稿

vue3.x使用swiper实现卡片自动轮播效果

网友投稿 • • 云知识 • 阅读 0

　　在许多开发项目中轮播效果承担着热门主题、热门推荐，以下是在vue3.x中使用swiper实现自动轮播。

　　安装Swiper

　　npm i swiper@5.4.5

　　引入组件库

　　import Swiper from 'swiper' // 引入库
　　import 'swiper/css/swiper.css' // 引入样式文件，注意5和6版本的样式文件不一致
　　完整代码
　　<template>
　　<div>
　　<div>
　　<div v-for="(item, i) in imgs" :key="i"><img :src="item.pic" /></div>
　　</div>
　　</div>
　　</template>
　　<script>
　　import { reactive, onMounted } from 'vue'
　　import Swiper from 'swiper' // 引入库
　　import 'swiper/css/swiper.css' // 引入样式文件，注意5和6版本的样式文件不一致
　　import icon_right_0 from '@/assets/homedetail/banner.jpg' //引入的图片
　　import icon_right_1 from '@/assets/homedetail/banner.jpg1'//引入的图片
　　export default {
　　name: 'HomeSwiper',
　　setup() {
　　onMounted(() => {
　　var mySwiper = new Swiper('.swiper-container', {
　　loop: true, // 循环模式选项
　　autoplay: true, //自动滚动
　　effect: 'fade',//渐变切换
　　autoplay: {
　　delay: 2000, //1秒切换一次
　　pauseOnMouseEnter: true //鼠标移入 轮播暂停
　　},
　　})
　　})
　　let imgs = reactive([
　　{ pic: icon_right_0 },
　　{ pic: icon_right_1 },
　　{ pic: icon_right_0 }
　　])
　　return {
　　imgs
　　}
　　}
　　}
　　</script>
　　<style>
　　.swiper-container {
　　width: 100%;
　　height: 200px;
　　.swiper-slide {
　　width: 100% !important;
　　img {
　　width: 100%;
　　height: 100%;
　　object-fit: cover;
　　}
　　}
　　}
　　</style>

　　以下为展示效果

vue3.x使用swiper实现卡片自动轮播效果

原创文章，作者：网友投稿，如若转载，请注明出处：https://www.cloudads.cn/archives/4179.html

赞 (0)
网友投稿网友投稿
0 0
上一篇 2022年10月13日 am11:17
下一篇 2022年10月13日 am11:18

相关推荐

发表评论

登录后才能评论