Swiper.js使用遇到的问题总结onSlideChangeEnd回调偶尔触发,偶尔不触发等;

Swiper 是一个开源免费的移动触摸插件。

在使用中遇到这样一个问题,记录一下。

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

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

解决方案:

  1. 添加 fade:{crossFade:true}
  2. 切换之后效果, 使用 onSlideChangeEnd(page切换后触发) 会偶尔不触发, 请使用 onTransitionEnd(过度效果结束触发)

    var mySwiper = new Swiper(‘.swiper-container‘,{  pagination: ‘.swiper-pagination‘,   nextButton: ‘.swiper-button-next‘,
       prevButton: ‘.swiper-button-prev‘,
       effect: ‘fade‘,// tips
       fade: {
         crossFade: true,
       },
       onTransitionEnd: function (swiper) {
         console.info("页面跳转到第:", swiper.activeIndex, " 页")
       }
     })
    

      

时间: 2024-12-24 13:05:17

Swiper.js使用遇到的问题总结onSlideChangeEnd回调偶尔触发,偶尔不触发等;的相关文章

swiper.js

<!DOCTYPE html><html lang="en"><head> <meta charset="utf-8"> <title>Swiper demo</title> <!-- Link Swiper's CSS --> <link rel="stylesheet" href="../dist/css/swiper.min.css"

Swiper.js使用教程

上个礼拜,通过在制作公司产品介绍弹出框的过程,使用了强大的Swiper.js,官网地址:(http://www.swiper.com.cn/). 一.Swiper.js简介: Swiper(前称Swiper master) 是一款免费以及轻量级的移动设备触控滑块的js框架,使用硬件加速过渡(如果该设备支持的话).主要使用与移动端的网站.网页应用程序(web apps),以及原生的应用程序(native apps).主要是为IOS而设计的,同时,在Android.WP8系统以及PC端的浏览器也有着

swiper.js初涉

要做个手机端的轮播,研究了一下swiper.js 中文网站:http://www.swiper.com.cn/ 英文网站:http://www.idangero.us/swiper/ 记录一下代码: var mySwiper = new Swiper('.swiper-container',{        mode: 'vertical',//滑动方向为垂直方向        pagination: '.pagination',        onSlidePrev:function(swip

手机触屏滑动插件idangerous.swiper.js

手机触屏滑动插件 idangerous.swiper.js 演示地址:http://www.idangero.us/sliders/swiper/demos.php 下载地址:https://github.com/nolimits4web/Swiper

swiper.js 多图片页面的懒加载lazyLoading

swiper.js官网:http://www.swiper.com.cn/api/Images/2015/0308/213.html 设为true开启图片延迟加载,使preloadImages无效.需要将图片img标签的src改写成data-src,并且增加类名swiper-lazy.背景图的延迟加载则增加属性data-background(3.0.7开始启用). lazyLoadingInPrevNextAmount 设置在延迟加载图片时提前多少个slide.个数不可少于slidesPerVi

iScroll.js和Swiper.js联合使用时的插件冲突(滑动冲突)

                  上面的截图 ,是手机端的一个滑动刷新效果.用的是scroll.js插件. 每项中又有一个滑动,是左右滑动的用swiper.js插件,查看每个班级的信息. 当手从swiper上开始滑动的时候,整个scroll就显得很不灵敏.各种调试,各种alert终于把问题定位在swiper.js的touchend上. touchend没有冒泡到scroll上,但是touchstart,toucnmove是有冒泡到scroll上的. 找了好久都没有找到哪里阻止了冒泡.最后想到一

移动端开发(四):swiper.js

swiper.js中文网:http://www.swiper.com.cn/ 文档结构 swiper.jquery.js    是需要引用jquery.js 或者 zepto.js 时,只需直接引用该文件即可,减少加载. swiper.animate.js  使用animate.js的动画效果,使用方法:http://www.swiper.com.cn/usage/animate/index.html 基本使用方法 具体操作:http://www.swiper.com.cn/usage/inde

Swiper.js手动滑动之后,不再自动滑动问题

var swiper = new Swiper('.swiper-container', {        pagination: '.swiper-pagination',        autoplay: 2000,        paginationClickable: true,        loop: true, //添加这个属性,就可以了        autoplayDisableOnInteraction : false    });

swiper.js滑动插件

Swiper常用于移动端网站的内容触摸滑动Swiper是纯javascript打造的滑动特效插件,面向手机.平板电脑等移动终端. Swiper能实现触屏焦点图.触屏Tab切换.触屏多图切换等常用效果. Swiper开源.免费.稳定.使用简单.功能强大,是架构移动终端网站的重要选择!大家在学一门技术的时候,得知道什么才是你需要的,别人需要的是什么!不要盲目的去学没有用的东西!好了! 今天小编就说到这里了,下期再会,点击这里查看更多请添加链接描述 原文地址:http://blog.51cto.com