文档章节

Swiper使用fade过渡中遇到的问题

木槿清
 木槿清
发布于 2017/04/28 14:53
字数 196
阅读 9
收藏 0

page 间切换效果 使用 fade 的时候,如果每个页面的大小不一样, 比如第一个页面全屏, 第二个页面比第一个小, 那么切换到第二页的时候, 第一页的内容还可以看到

还有,使用 fade 过渡方法,onSlideChangeEnd 回调偶尔触发,偶尔不触发。 因此使用 onTransitionEnd

解决方案:

  1. 添加 fade:{crossFade:true}
  2. 切换之后效果, 使用 onSlideChangeEnd(page切换后触发) 会偶尔不触发, 请使用 onTransitionEnd(过渡效果结束触发)
    window.galleryTop = new Swiper('.gallery-top', {
       autoplayStopOnLast: true,
       nextButton: '.swiper-button-next',
       prevButton: '.swiper-button-prev',
       effect: 'fade',
       fade: {
         crossFade: true,
       },
       onTransitionEnd: function (swiper) {
         console.info("页面跳转到第:", swiper.activeIndex, " 页")
       }
     })

     

本文转载自:http://www.jianshu.com/p/5d2986fa6072

共有 人打赏支持
木槿清
粉丝 0
博文 67
码字总数 12897
作品 0
中山
关于VueAwesomeSwiper在VUE中的使用以及遇到的一些问题

Vue-Awesome-Swiper 轮播图插件,可以同时支持Vue.js(1.X ~ 2.X),兼顾PC和移动端,随着vue的广泛使用,其中插件swiper也算是使用的比较频繁的插件,现在分享一下使用方法以及开发中会遇到...

littleyu
01/11
0
0
AngularJS 中使用Swiper制作滚动图不能滑动

Swiper是目前较为流行的移动端触摸滑动插件,因为其简单好用易上手,受到很多前端开发者的欢迎。 今天在使用Swiper的时候遇到这个问题: 使用angularjs动态循环生成swiper-slide类,在swipe...

冷冷gg
2016/11/15
405
0
【react开发】使用swiper插件,loop:true时产生的问题解决方案

这2天上班遇到的问题:react使用swiper3插件实现banner轮播,其中有个banner图有个click点击事件,而其他的是页面跳转。出现了一个问题: 就是向右滑动到该帧时的swiper,点击时未触发react...

海瑞菌·博客
07/20
0
0
Material Design - TransitionManager

材料设计其实在上一篇图片和色彩之后,应该是已经结束了。但是后来又发现忘了动画,这是让材料设计焕发光彩的重点啊。所以又翻开了文档和 google,开始了检索和阅读。 谷歌在 api 19 中添加了...

Arnold_J
01/03
0
0
解决swiper动态数据加载在移动端下左右滑动不好使?

Swiper 是目前较为流行的移动端触摸滑动插件,因为其简单好用易上手,受到很多前端开发者的欢迎!于是马上查看官方帮助文档开始学习。 今天在我使用的时候遇到了辣手的问题,使用jquery的aja...

豆花饭烧土豆
2016/09/30
634
0

没有更多内容

加载失败,请刷新页面

加载更多

Windows 下双 Python 开发环境配置

Windows 下双 Python 开发环境配置作者:老农民(刘启华)QQ: 46715422Email: 46715422@qq.com微信: 46715422 本人曾经在 Windows 下被两个版本环境折腾够呛,现在总结两个 Python...

新疆老农民
昨天
0
0
CentOS7全局安装composer

1. 下载composer-setup.php到当前目录 php -r "copy('https://install.phpcomposer.com/installer', 'composer-setup.php');" 2. 安装 php composer-setup.php 3. 将composer设置成全局 mv c......

月夜中徘徊
昨天
1
0
20180920上课截图

小丑鱼00
昨天
1
0
基于TCP的远程服务调用

前言 上篇,分析了基于HTTP方式的RPC调用。本篇将在上篇的基础上,分析基于TCP方式的RPC调用。代码的整体思路是一致的,可以看作是在上篇功能上的扩展——即通信的方式。 代码:https://git...

MarvelCode
昨天
1
0
67:shell脚本介绍 | shell脚本结构 | 执行data命令用法 | shell脚本中变量

1、shell脚本介绍: shell是一种脚本语言和传统的开发语言相比,会比较简单: shell有自己语法,可以支持逻辑判断、循环等语法: 可以自定义函数,目的是减少重复的代码: shell是系统命令的集合...

芬野de博客
昨天
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部