新版本设置autoplay怎么都不失效，看了官网的Demos才发现须要在SwiperCore上应用Autoplay组件，包含鼠标滚动这些都须要use对应的组件 <script>import SwiperCore, { Autoplay, FreeMode, Scrollbar, Mousewheel } from "swiper";SwiperCore.use([Autoplay, FreeMode, Scrollbar, Mousewheel]);</script><template> <swiper :direction="'vertical'" :spaceBetween="50" :scrollbar="true" :mousewheel="true" :autoplay="{ delay: 1500, disableOnInteraction: false, }" class="mySwiper" /></template>
根本信息官网介绍Swiper is the free and most modern mobile touch slider with hardware accelerated transitions and amazing native behavior. It is intended to be used in mobile websites, mobile web apps, and mobile native/hybrid apps.文档引入: https://swiperjs.com/get-star...API: https://swiperjs.com/api/Demo: https://swiperjs.com/demos/Git: https://github.com/nolimits4w...应用场景-过渡成果轮播图实际指标实现一个异形轮播图。反对手势左右滑动切换核心图。 实现异形滚动的原理核心页（class: swiper-slide-active）scale:1,其余页(class: swiper-slide) scale(0<x<1)来实现核心页在用户视觉核心的成果。scale留白区域通过swiper的配置项（ 调整每个swiper） + css款式（整体元素微调） 来打消。 代码参考（局部）index.vue： <div class="gallery-wrapper"> <!-- Slider main container --> <div class="swiper-container"> <!-- Additional required wrapper --> <div class="swiper-wrapper"> <!-- Slides --> <div class="swiper-slide" v-for="(item,index) in images" :key="`${item.src}-index`" > <img v-lazy="item.src" :key="item.src" class="image-content" <v-touch tag="div" @tap="onTap(index)" > <img src="./../../../assets/art-picture/scale-icon.png" alt="放大" class="scale-icon" /> </v-touch> <!-- <div class="swiper-lazy-preloader">loading...</div> --> </div> </div> </div> </div>style.less: ...
1. 首先进入Swiper官方网站咱们关上S6在Vue中的使用手册https://swiperjs.com/vue#swip...2. 而后全页搜寻mouse相干操作 上图示意Swiper供咱们调用的API(module), 值得注意的是标记 ① 处文字: 这示意Swiper6不再同之前一样 在attribute中绑定options, 而是应用module的形式来应用3. 伪代码演示<template> <swiper mousewheel // 这里为定义好的属性( 监听滚轮, 管制swiper-slide), 留神这里须要小写 > <swiper-slide> content </swiper-slide> </swiper></template><script>import "swiper/swiper.min.css";import SwiperCore, { Mousewheel } from "swiper"; // 引入默认抛出的外围模块和所用到按需引入的模块import { Swiper, SwiperSlide } from "swiper/vue"; // swiper componentsSwiperCore.use(Mousewheel); // 注册其按需引入的模块. 这样就能够应用了;export default { name: "SwiperTest", components: { Swiper, SwiperSlide }}</script>4. 总结4.1 文档中寻找适合的模块4.2 引入并注册module4.3 属性援用中留神大小写
最近在应用swiper实现轮播成果：swiper版本不同，应用有所不同。swiper6配置如下：main.js:app.vue:optionsAc: { direction: 'vertical', effect: 'coverflow', slideShadows: false, coverflow: { stretch: -40, depth: 200, modifier: 2, rotate: 0 }, slidesPerView: 1, //一行显示3个 spaceBetween: 0, //距离30 grabCursor: true, centeredSlides: true, speed: 1000, // loop:true,//循环会导致点击切换和显示错位 on: { slideChangeTransitionEnd (swiper) { vm.$nextTick(function(){ this.clickAc=swiper.snapIndex })}}}swiper6以下配置如下：
最近在做一个需要是：高低联动，点击下面，上面翻滚到对应图片，翻滚图片，下面对应图片选中。应用过程中发现两个bug:然而在配置属性的时候,发现两个bug。bug1:(滚动监听：slideChangeTransitionEnd，loop:true)，界面进来会显示如下：高低联动都会错位显示：bug2：去掉loop属性，疾速翻滚上面图片时，有时触发不了slideChangeTransitionEnd，导致错位显示
1. 无奈应用coverflow, fade等各种effect依照vue-awesome-swiper官网文档装置后： npm install swiper vue-awesom-swiper --save发现无奈应用coverflow的3D成果，看了swiper版本是6以上的，vue-awesome-swiper的版本是4以上的。swiper中文文档4-6版本的是有effect的，不晓得为什么用不了。看了vue-awesome-swiper上的issue，把swiper降到4就能用了。 npm install swiper@4.1.5一开始想不到更新的版本居然会不反对3D成果，或者是vue-awesome-swiper的兼容问题，找了半天，终于升高版本解决了这个问题。 2. 引入css门路加dist/同样依照官网文档引入css,然而终端却报错了：找不到swiper/css/swiper.css // import style (>= Swiper 6.x)import 'swiper/swiper-bundle.css'// import style (<= Swiper 5.x)import 'swiper/css/swiper.css'去node_modules外面看了一下，改成import 'swiper/dist/css/swiper.css'就不报错了。不晓得构建的时候会不会有问题。 3. 应用coverflow成果时，想要实现挪动端一屏显示三个，又不心愿是等分的如果是等分的很容易解决，只有设置swiper选项：slidesPerView: 3 然而我想实现如下设计稿： 这时如果同时在css外面设置swipe-slide的宽度，就会有很奇怪的成果，大家能够试一下。最初我通过将slidesPerView:'auto'，这样设置后就能够设置css宽度，一屏也能够恰好展现三个了。