zoukankan      html  css  js  c++  java
  • swiper移动端下不能正常轮播的解决方案-----此坑没躺过估计很难找到正确姿势

    <script>
    var mySwiper = new Swiper('.swiper-container', {
        direction: 'vertical', //horizontal横向
        loop: true,
        pagination: '.swiper-pagination', // 如果需要分页器
        // 如果需要前进后退按钮
        nextButton: '.swiper-button-next',
        prevButton: '.swiper-button-prev',
        scrollbar: '.swiper-scrollbar',// 如果需要滚动条
        //核心部分
        autoplayDisableOnInteraction : false, //滑动之后, 定时器也不会被清除
        observer: true, //修改swiper自己或子元素时,自动初始化swiper 
        observeParents: false, //修改swiper的父元素时,自动初始化swiper 
        onSlideChangeEnd: function(swiper) {      
            swiper.update();     
            swiper.startAutoplay();   
            swiper.reLoop();   
        }
    })
    </script>

    mySwiper.reLoop(); 重新对需要循环的slide个数进行计算,当你改变了slidesPerView参数时需要用到,需要自动轮播的时候必须要加上;

    swiper.update();  更新Swiper,这个方法包含了updateContainerSize,updateSlidesSize,updateProgress,updatePagination,updateClasses方法。也就是数据改变是重新初始化一次swiper;

    mySwiper.startAutoplay(); 重新开始自动切换;

  • 相关阅读:
    hdu 1023 卡特兰数+高精度
    hdu 1568 Fibonacci 快速幂
    hdu 3054 Fibonacci 找循环节的公式题
    hdu 5167 Fibonacci 打表
    hdu 4165 Pills dp
    HDU 5791 Two DP
    BZOJ 2152: 聪聪可可 树分治
    HDU 5213 Lucky 莫队+容斥
    HDU 5145 NPY and girls 莫队+逆元
    BZOJ 3289: Mato的文件管理 莫队+BIT
  • 原文地址:https://www.cnblogs.com/lhl66/p/8074959.html
Copyright © 2011-2022 走看看