本文实例为大家分享了vue3.x使用swiper实现卡片轮播的具体代码,供大家参考,具体内容如下

版本号:

vue/cli:4.5.12
swiper:^6.8.4

安装

npm install --save swiper

使用以及配置

<div class="swiper-container home_swiper">
    <div class="swiper-wrapper">
        <div class="swiper-slide" v-for="(item,index) in aImages" :key="index">
            <img :src="item.picUrl" alt="" />
        </div>
    </div>
</div>
import {
    ref,
    nextTick
} from 'vue';
import Swiper, {
    Autoplay,
    EffectCoverflow
} from "swiper";
Swiper.use([Autoplay, EffectCoverflow]);
import "swiper/swiper.scss";
export default {
    setup() {
        const aImages = ref([]);
        const fInitSwiper = () => {
            new Swiper(".home_swiper", {
                //循环
                loop: true,
                //每张播放时长3秒,自动播放
                spaceBetween: 16,
                // 切换效果 
                effect: "coverflow",
                // 该选项给Swiper用户提供小小的贴心应用,设置为true时,鼠标覆盖Swiper时指针会变成手掌形状,拖动时指针会变成抓手形状。
                grabCursor: true,
                // 设定为true时,active slide会居中,而不是默认状态下的居左。
                centeredSlides: true,
                // 设置slider容器能够同时显示的slides数量(carousel模式)。
                slidesPerView: 1.32,
                // 启动动态检查器(OB/观众/观看者),当改变swiper的样式(例如隐藏/显示)或者修改swiper的子元素时,自动初始化swiper。默认false,不开启,可以使用update()方法更新。
                observer: true,
                observeParents: true,
                observeSlideChildren: true,
                // 自动切换
                autoplay: {
                    // 自动切换的时间间隔
                    delay: 3000,
                    // 如果设置为true,当切换到最后一个slide时停止自动切换
                    stopOnLastSlide: false,
                    // 用户操作swiper之后,是否禁止autoplay。默认为true:停止
                    disableOnInteraction: false,
                },
                // 类似于苹果将多首歌曲的封面以3D界面的形式显示出来的方式
                coverflowEffect: {
                    // slide做3d旋转时Y轴的旋转角度
                    rotate: 0,
                    // 每个slide之间的拉伸值,越大slide靠得越紧。5.3.6 后可使用%百分比
                    stretch: -70,
                    // slide的位置深度。值越大z轴距离越远,看起来越小。
                    depth: 500,
                    // depth和rotate和stretch的倍率,相当于depth*modifier、rotate*modifier、stretch*modifier,值越大这三个参数的效果越明显。
                    modifier: 1,
                    // 是否开启slide阴影
                    slideShadows: true,
                },
            });
        };
        return {
            aImages 
        }
    }
}

展示效果

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持Devmax。

vue3.x使用swiper实现卡片轮播的更多相关文章

  1. swiper在angularjs中使用循环轮播失效的解决方法

    今天小编就为大家分享一篇swiper在angularjs中使用循环轮播失效的解决方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧

  2. vue中swiper开启loop后,点击事件不响应的解决方案

    这篇文章主要介绍了vue中swiper开启loop后,点击事件不响应的解决方案,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

  3. vue3.x 使用jsplumb实现拖拽连线

    这篇文章主要为大家详细介绍了vue3.x 使用jsplumb实现拖拽连线,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

  4. swiper+echarts实现多个仪表盘左右滚动效果

    这篇文章主要为大家详细介绍了swiper+echarts实现多个仪表盘左右滚动效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

  5. AngularJS 中使用Swiper制作滚动图不能滑动的解决方法

    Swiper是目前较为流行的移动端触摸滑动插件,因为其简单好用易上手,受到很多前端开发者的欢迎。这篇文章主要介绍了AngularJS 中使用Swiper制作滚动图不能滑动的解决方法,需要的朋友可以参考下

  6. JavaScript中自定义swiper组件详解

    这篇文章主要介绍了微信小程序 swiper组件轮播图详解及实例的相关资料,需要的朋友可以参考下,希望能给你带来帮助

  7. 微信小程序swiper轮播图组件使用方法详解

    这篇文章主要为大家详细介绍了微信小程序swiper轮播图组件的使用方法,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

  8. react中使用swiper的具体方法

    本篇文章主要介绍了react中使用swiper的具体方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

  9. 微信小程序轮播图swiper代码详解

    swiper组件是滑块视图容器,主要用来做图片轮播。这篇文章主要给大家介绍了关于微信小程序轮播图swiper代码的相关资料,需要的朋友可以参考下

  10. Vue使用Swiper的案例详解

    这篇文章主要介绍了Vue使用Swiper的案例详解,主要包括引入swiper,创建轮播图组件CarouselContainer.vue的详细代码,本文给大家介绍的非常详细,需要的朋友可以参考下

随机推荐

  1. js中‘!.’是什么意思

  2. Vue如何指定不编译的文件夹和favicon.ico

    这篇文章主要介绍了Vue如何指定不编译的文件夹和favicon.ico,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

  3. 基于JavaScript编写一个图片转PDF转换器

    本文为大家介绍了一个简单的 JavaScript 项目,可以将图片转换为 PDF 文件。你可以从本地选择任何一张图片,只需点击一下即可将其转换为 PDF 文件,感兴趣的可以动手尝试一下

  4. jquery点赞功能实现代码 点个赞吧!

    点赞功能很多地方都会出现,如何实现爱心点赞功能,这篇文章主要为大家详细介绍了jquery点赞功能实现代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

  5. AngularJs上传前预览图片的实例代码

    使用AngularJs进行开发,在项目中,经常会遇到上传图片后,需在一旁预览图片内容,怎么实现这样的功能呢?今天小编给大家分享AugularJs上传前预览图片的实现代码,需要的朋友参考下吧

  6. JavaScript面向对象编程入门教程

    这篇文章主要介绍了JavaScript面向对象编程的相关概念,例如类、对象、属性、方法等面向对象的术语,并以实例讲解各种术语的使用,非常好的一篇面向对象入门教程,其它语言也可以参考哦

  7. jQuery中的通配符选择器使用总结

    通配符在控制input标签时相当好用,这里简单进行了jQuery中的通配符选择器使用总结,需要的朋友可以参考下

  8. javascript 动态调整图片尺寸实现代码

    在自己的网站上更新文章时一个比较常见的问题是:文章插图太宽,使整个网页都变形了。如果对每个插图都先进行缩放再插入的话,太麻烦了。

  9. jquery ajaxfileupload异步上传插件

    这篇文章主要为大家详细介绍了jquery ajaxfileupload异步上传插件,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

  10. React学习之受控组件与数据共享实例分析

    这篇文章主要介绍了React学习之受控组件与数据共享,结合实例形式分析了React受控组件与组件间数据共享相关原理与使用技巧,需要的朋友可以参考下

返回
顶部