zoukankan      html  css  js  c++  java
  • 一个页面多个swiper问题解决

      关于一个页面中多处使用swiper而引起的翻页问题

    最近公司项目做了一个双12活动,活动页面中存在18个轮播!!!然后在进行swiper声明的时候发现了问题,如果页面只是有一两个轮播,可以直接给每一个swiper-container 元素重新增加一个新类名,然后使用新类名进行声明。

    但现在页面中一共存在18个轮播,如果要每个都进行声明,对代码本身是一种冗余。因此,需要换一种思路进行实现。初步设想对页面中的swiper-container 元素进行遍历声明,然而事实说明,初始渲染页面没问题,但是当对其中一个轮播模块进行手动翻页之后当前轮播模块的自动翻页模块就会失效。

    解决办法如下(页面引用的swiper版本是3.3.1):

    代码拿走不谢:

            $.extend({
                "swiperOption":function(f1,f2){
                    new Swiper(f1, {
                        pagination: f2,
                        slidesPerView: 1,
                        centeredSlides: true,
                        paginationClickable: true,
                        loop:true,
                        autoplay: 2500,
                          autoplayDisableOnInteraction: false,
                    });                 
                },
            });                       
            $(".swiper-container").each(function(index){
                $.swiperOption($(this),$(this).find(".swiper-pagination"));
            });
  • 相关阅读:
    Compiere中的树
    Compiere 模型构建
    LSMW魔鬼教程
    Compiere 因翻译工作没有完成,所以现在系统中的所有帮助去掉
    插入、更新扩展字段
    SAPscript Forms 教程
    SAP ABAP 效率测试
    批量更新数据表
    月份的描述表T247
    SAP 程序下载工具
  • 原文地址:https://www.cnblogs.com/DreamerLeaf/p/10086882.html
Copyright © 2011-2022 走看看