您的当前位置:首页使用Vue-Awesome-Swiper实现旋转叠加轮播效果&平移轮播效果
广告

使用Vue-Awesome-Swiper实现旋转叠加轮播效果&平移轮播效果

2023-12-06 来源:哗驼汽车网

旋转叠加

平移

前段时间做Hybrid App,UI设计湿要求某一个页面的展示要实现滑动轮播效果,选中的内容卡片居中显示,上一个内容卡片和下一个内容以小一倍的大小显示在选中的卡片后头,而且要高斯模糊等等。最骚的是滑动特效要是一个个旋转叠加。(摔!

当时用的是vue-cli-3 + ant-design-vue实现的页面,发现ant-design-vue里头有现成的Carousel组件可用,由于排期比较急,先暂时用这个实现了第一版,没有特效没有其他花里胡哨的展示。验收完第一版后,发现ant-design-vue的坑是真的多啊。Carousel在移动端也是十分的不流畅。总是就是体验特别的不好。最后一气之下,全部样式自己写,全部组件自己封装,将ant-design-vue完完整整移出了项目。

轮播图这块想到了Swiper这一好东西,现在已经有了vue版,但是是没有专门的vue版文档的,可以找到的项目也比较少。无奈之下啃了Swiper4文档,一顿猛操作,摸到了一点点门道。把需求实现了是也。简单整理了一下,写了个简单的小demo,记录一下,如果可以帮到你那是最好啦~

1.首先引入Vue-Awesome-Swiper

引入Vue-Awesome-Swiper有两种方式,一种是全局引入,一种是组件内引入。如果你的项目里只有一个地方要用到这玩意,那就在用到的那个页面引入就行,如果多个地方要用到,那就全局引入吧。

全局引入:

// main.jsimport VueAwesomeSwiper from 'vue-awesome-swiper'import 'swiper/dist/css/swiper.css'Vue.use(VueAwesomeSwiper, /* { default global options } */)

组件内引入:

// xxx.vue<script>import 'swiper/dist/css/swiper.css'import { swiper, swiperSlide } from 'vue-awesome-swiper'export default { components: { swiper, swiperSlide }}</script>

2.在页面使用

<template> <div class="swiper-content"> <swiper ref="mySwiper" :options="swiperOption" class="show-swiper"> <template v-for="(item, index) in list"> <swiper-slide :key="index"> <div class="swiper-item"> <span>{{ item }}</span> </div> </swiper-slide> </template> </swiper> </div></template>

js部分

旋转叠加

<script>import { mapState } from 'vuex'import store from '@/store'export default { data() { return { list: [1, 2, 3, 4, 5, 6], swiperOption: { // 设置slider容器能够同时显示的slides数量,默认为1, 'auto'则自动根据slides的宽度来设定数量 slidesPerView: 'auto', /* * 开启这个参数来计算每个slide的progress(进度、进程) * 对于slide的progress属性,活动的那个为0,其他的依次减1 */ watchSlidesProgress: true, // 默认active slide居左,设置为true后居中 centeredSlides: true, // 当你创建一个Swiper实例时是否立即初始化,这里我们手动初始化 init: false, on: { progress: function() { for (let i = 0; i < this.slides.length; i++) { const slide = this.slides.eq(i) // 指定匹配元素集缩减值 const slideProgress = this.slides[i].progress // 当前元素集的progress值 let modify = 0 // 偏移权重 if (parseInt(Math.abs(slideProgress)) > 0) { modify = Math.abs(slideProgress) * 0.2 // 不一定要0.2,可自行调整 } const translate = slideProgress * modify * 500 + 'px' // 500是swiper-slide的宽度 const scale = 1 - Math.abs(slideProgress) / 5 // 缩放权重值,随着progress由中向两边依次递减,可自行调整 const zIndex = 99 - Math.abs(Math.round(10 * slideProgress)) slide.transform(`translateX(${translate}) scale(${scale})`) slide.css('zIndex', zIndex) slide.css('opacity', 1) // 是否可见 if (parseInt(Math.abs(slideProgress)) > 1) { // 设置了只有选中的元素以及他两遍的显示,其他隐藏 slide.css('opacity', 0) } } }, slideChange: function() { store.commit('SET_ACTIVE_INDEX', this.activeIndex) } } } } }, computed: { swiper() { return this.$refs.mySwiper.swiper }, ...mapState({ activeItemIndex: state => state.activeIndex }) }, mounted() { this.initSwiper() }, methods: { initSwiper() { this.$nextTick(async() => { await this.swiper.init() // 现在才初始化 await this.swiper.slideTo(this.activeItemIndex) }) } }}</script>

平移

<script>import { mapState } from 'vuex'import store from '@/store'export default { data() { return { list: [1, 2, 3, 4, 5, 6], swiperOption: { slidesPerView: 'auto', watchSlidesProgress: true, // 设定slide与左边框的预设偏移量(单位px) slidesOffsetBefore: 37, // 设置slide之间的距离(单位px) spaceBetween: 17, centeredSlides: true, init: false, on: { progress: function() { for (let i = 0; i < this.slides.length; i++) { const slide = this.slides.eq(i) const slideProgress = this.slides[i].progress const scale = 1 - Math.abs(slideProgress) / 5 // 缩放权重值,随着progress由中向两边依次递减,可自行调整 slide.transform(`scale3d(${scale}, ${scale}, 1)`) } }, slideChange: function() { store.commit('SET_ACTIVE_INDEX', this.activeIndex) } } } } }, computed: { swiper() { return this.$refs.mySwiper.swiper }, ...mapState({ activeItemIndex: state => state.activeIndex }) }, mounted() { this.initSwiper() }, methods: { initSwiper() { this.$nextTick(async() => { await this.swiper.init() // 现在才初始化 await this.swiper.slideTo(this.activeItemIndex) }) } }}</script>

配置参数那里,init我是设置的false,我是想在项目挂载完成后,获取到了接口数据之后,再用 this.swiper.init() 去初始化轮播组件的,然后我把激活项的索引存在了vuex里头,这样每次从其他页面返回这个页面,就可以用 this.swiper.slideTo(this.activeItemIndex) 去控制我要定位到哪一个内容卡片先。

3.样式初始化方面

swiper-content { width: 100%; height: 100%; position: relative; overflow: hidden; margin: 0 auto; padding: 50px 0; .show-swiper { width: 100%; height: 100%; top: 0; left: 0; .swiper-slide { width: 500px; // 表示所有属性都有动作效果,过度时间为0.4s,以慢速开始和结束的过渡效果 transition: all .4s cubic-bezier(.4, 0, .2, 1); .swiper-item { width: 100%; height: 500px; background: rgb(140, 172, 134); border-radius: 6px; color: orangered; font-size: 24px; line-height: 1.5; border: 1px solid orangered; } } }}

因为 slidesPerView: 'auto' ,所以swiper-slide我们要给他一个初始化的宽度,以便他自动计算容器宽度,然后这里我设置了动画的效果 transition: all .4s cubic-bezier(.4, 0, .2, 1); 可以根据自己的需要作出改动

大概就是这些内容,是不是很简单呢。我会把源码地址贴出来,有需要的话就自行clone参考吧~,项目里我使用的是vue-cli3,可以自行调整。

总结

以上所述是小编给大家介绍的使用Vue-Awesome-Swiper实现旋转叠加轮播效果&平移轮播效果,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

小编还为您整理了以下内容,可能对您也有帮助:

vue vue-awesome-swiper 轮播

这里实现的是swiper效果:异形的slide

vue-awesome-swiper是基于swiper的,安装不同版本的vue-awesome-swiper对应不同的swiper
当前安装的版本是

1、安装命令:

2、在main.js中全局引入组件和css

3、开始使用

html

js

css

vue vue-awesome-swiper 轮播

这里实现的是swiper效果:异形的slide

vue-awesome-swiper是基于swiper的,安装不同版本的vue-awesome-swiper对应不同的swiper
当前安装的版本是

1、安装命令:

2、在main.js中全局引入组件和css

3、开始使用

html

js

css

vue-awesome-swiper的正确使用姿势

介绍一下vue-awesome-swiper最靠谱的使用方法。

目前网上对于vue-awesome-swiper的使用方法各种坑,要么版本对不上,要么swiper.css引用地址不对,要么swiper-pagination不显示,要么自动轮播失效,反正各种坑让人火大。下面介绍一下自己亲测可用的正确使用方法。

首先版本,请使用3.1.3,别想着用什么4以上的或别的版本,目前就这个版本最稳定,不相信可以自己去测试,掉坑里可别怪没提醒!

页面引入即可,没必要全局引入,因为很少所以页面都要使用轮播的。全局引入只会增加额外的加载缓存和加载速度。全部贴出来自己衡量吧。

页面引入
请注意此处引入的swiper, swiperSlide的s是小写,搞错会报错。

全局引入
main.js

查看github的vue-awesome-swiper的官方示例:
https://v1.github.surmon.me/vue-awesome-swiper/

以上。

最新更新了“如何在nuxt项目里使用vue-awesome-swiper”的新文章,
有兴趣的诸位可点击查看: Nuxt使用vue-awesome-swiper的正确姿势

vue-awesome-swiper的正确使用姿势

介绍一下vue-awesome-swiper最靠谱的使用方法。

目前网上对于vue-awesome-swiper的使用方法各种坑,要么版本对不上,要么swiper.css引用地址不对,要么swiper-pagination不显示,要么自动轮播失效,反正各种坑让人火大。下面介绍一下自己亲测可用的正确使用方法。

首先版本,请使用3.1.3,别想着用什么4以上的或别的版本,目前就这个版本最稳定,不相信可以自己去测试,掉坑里可别怪没提醒!

页面引入即可,没必要全局引入,因为很少所以页面都要使用轮播的。全局引入只会增加额外的加载缓存和加载速度。全部贴出来自己衡量吧。

页面引入
请注意此处引入的swiper, swiperSlide的s是小写,搞错会报错。

全局引入
main.js

查看github的vue-awesome-swiper的官方示例:
https://v1.github.surmon.me/vue-awesome-swiper/

以上。

最新更新了“如何在nuxt项目里使用vue-awesome-swiper”的新文章,
有兴趣的诸位可点击查看: Nuxt使用vue-awesome-swiper的正确姿势

vue 的ssr的轮播图vue-awesome-swiper

官网使用nuxt将vue服务器端渲染ssr成静态页面,利于seo搜索,使用 starter 模板创建,项目开发完成后,使用 npm run generate

轮播图插件:# vue-awesome-swiper

参考地址

npmjs的vue-awesome-swiper

github的vue-awesome-swiper

操作:

1,

目前报错

解决(对应plugin文件夹下的文件)

为什么在vue中使用轮播图,图片一直是竖着的?

1. CSS样式问题:图片的CSS样式可能被设置了旋转或者倾斜的样式,导致显示为竖着的。可以检查图片的CSS样式,尤其是transform属性,确保没有设置旋转或倾斜的效果。

2. 图片方向问题:图片本身的方向可能是竖向的。可以使用图片编辑软件将图片调整为横向的。

3. 轮播组件设置问题:轮播组件可能默认将图片显示为竖向的。可以查看轮播组件的文档或源代码,寻找设置并调整图片方向的选项。

使用Vue.js和Vue-Awesome-Swiper库实现的简单的水平方向轮播图:

<template>

<div class="swiper-container">

<div class="swiper-wrapper">

<div class="swiper-slide" v-for="(image, index) in images" :key="index">

<img :src="image" alt="Slider Image" />

</div>

</div>

<div class="swiper-pagination"></div>

</div>

</template>

<script>

import { Swiper, SwiperSlide } from 'vue-awesome-swiper';

export default {

components: {

Swiper,

SwiperSlide,

},

data() {

return {

images: [

'https://example.com/image1.jpg',

'https://example.com/image2.jpg',

'https://example.com/image3.jpg',

],

swiperOptions: {

pagination: {

el: '.swiper-pagination',

},

},

};

},

};

</script>

<style>

/* Add your custom CSS styles here */

</style>

在模板中使用Swiper和SwiperSlide组件来循环渲染轮播项,并将图片显示在其中。轮播项的样式可以通过自定义CSS来调整。

哗驼汽车网还为您提供以下相关内容希望对您有帮助:

vue vue-awesome-swiper 轮播

这里实现的是swiper效果:异形的slide vue-awesome-swiper是基于swiper的,安装不同版本的vue-awesome-swiper对应不同的swiper 当前安装的版本是 1、安装命令:2、在main.js中全局引入组件和css 3、开始使用 html js css ...

vue 的ssr的轮播图vue-awesome-swiper

官网使用nuxt将vue服务器端渲染ssr成静态页面,利于seo搜索,使用 starter 模板创建,项目开发完成后,使用 npm run generate 轮播图插件:# vue-awesome-swiper 参考地址 npmjs的vue-awesome-swiper github的vue-awesome-swiper ...

为什么在vue中使用轮播图,图片一直是竖着的?

3. 轮播组件设置问题:轮播组件可能默认将图片显示为竖向的。可以查看轮播组件的文档或源代码,寻找设置并调整图片方向的选项。使用Vue.js和Vue-Awesome-Swiper库实现的简单的水平方向轮播图:&lt;template&gt; ...

vue 中 鼠标移入停止轮播 移出开始轮播 (swiper5)

this.$refs.mySwipers.$swiper.autoplay.stop();    },    mouseLeave() {       this.$refs.mySwipers.$swiper.autoplay.start(); ...

swiper在vue中有哪些用法

Swiper能实现触屏焦点图、触屏Tab切换、触屏多图切换等常用效果。Swiper开源、免费、稳定、使用简单、功能强大,是架构移动终端网站的重要选择!解决vue中使用swiper插件,在引入swiper插件后,发现无法正常运行问题这次我们模拟从后台...

vue封装的可视化滚动表格组件

在大屏数据可视化方面,我们经常会使用到表格组件,这次封装的是不带分页的表格组件,对于长列表表格,我们采用的是滚动轮播的形式向下滚动展示表格数据。组件的翻页滚动是基于 vue-awesome-swiper 二次封装去实现的。

css轮播图代码怎样更改为vue样式?

创建一个 Vue 组件:首先,在 Vue 项目中创建一个组件用于显示轮播图。你可以使用 vue-cli 或其他方式创建一个新的 Vue 组件。引入样式文件:将原始 CSS 文件中的样式代码复制到 Vue 组件的样式部分。可以将其放在组件的...

Vue在同一个页面制作多个轮播图

其实很简单,只需要为每个轮播图设置不同的class类和不同的options名即可。实现的效果图:因为第二个轮播图是左右滑动,可能会报下面的错: 这是因为封装好的swiper.js文件中有一个默认事件, e.preventDefault() 只...

vue中轮播组件,实现默认显示3张图片,中间显示全部两边显示部分_百度...

实现的效果图片展示如下:找了,YDui,Museui发现都不可以,因为他们是display:none,于是安装了swiper 关于在同一个页面使用多个swiper,多个轮播出现冲突的问题?-- 首先可以给swiper-container这个层级的div加多个专属类名或者id,...

集团彩铃内容

如果你真不想听到,建议你直接彩铃网站上把彩铃功能暂停了,用普通的“嘟嘟”等待音。问题二:中国移动集团彩铃怎么取消?您好,很高兴为您解答:短信取消方式:畅送免费短信0000至10086查询退订。或与所在单位集团经办人联系...

Top