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

3403771864 发布于2022-09-08 21:56 / 2328人阅读

　　在许多开发项目中轮播效果承担着热门主题、热门推荐，以下是在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>

　　以下为展示效果

GPU云服务器云服务器 js图片自动轮播滑动轮播 jquery滑动轮播 js多张图片滚动轮播

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/127604.html

干货--手把手撸vue移动UI框架：滑动轮播

摘要：其次父组件中负责通用的功能，以及轮播的整体架构，其结构如下。下面的是一种移动端的适配方案。接下来实现函数运用动画切换到指定下标的子项到此为止，咱们就已经完成了一个初步的滑动切换轮播图的功能了。前言昨天写了一篇侧边菜单组件的文章，阅读人数挺多的，内心很欣喜（偷着乐，第一篇文章有这么多人看）！乘着这股劲，今天在继续写一篇我们平时工作中更常用的滑动轮播组件的文章。效果展示老规矩，咱们...

MSchumi 2019-08-22 15:12 评论0 收藏0
vue-swiper 基于Vue2.0开发轻量、高性能轮播插件

vue-swiper 基于 Vue2.0 开发，基本满足大部分功能轻量、高性能轮播插件。目前支持无缝衔接自动轮播、无限轮播、手势轮播没有引入第三方库，原生 js 封装,打包之后只有 8.2KB 大小性能还是杠杠滴 demo showImg(https://segmentfault.com/img/remote/1460000012630045?w=280&h=280); ? 觉得好用给...

idealcn 2019-08-21 18:28 评论0 收藏0
解决swiper.js中无缝轮播的问题。

摘要：根据公司需求需要对让轮播无间隙播放，类似这种效果。通过查看代码，发现这个类中有个属性修改中的源码，将这个属性的值改为即可实现无缝隙轮播，就是这么简单。轮播有它的好处是纯打造的滑动特效插件，面向手机平板电脑等移动终端。根据公司需求需要对让轮播无间隙播放，类似这种效果：http://www.16sucai.com/upload...。因为偷懒用的是swiper.js插件编写的。swipe...

tuniutech 2019-08-30 14:05 评论0 收藏0