var list = $('.p04-s2 li');
list.each(function (index) {
new Swiper ($(this).find('.swiper-container'), {
spaceBetween: 10,
slidesPerView : 3,
watchOverflow: true,
centeredSlides : true,
loop: true,
breakpoints: {
1500: {
slidesPerView: 2
},
1200: {
slidesPerView: 1
}
},
pagination: {
el: $(this).find('.swiper-pagination'),
clickable :true
},
navigation: {
prevEl: $(this).find('.prev-btn'),
nextEl: $(this).find('.next-btn'),
}
});
});

如果是tab下遍历swiper

 
        function initSwiper($element) {
            new Swiper ($element.find('.swiper-container'), {
                spaceBetween: 20,
                slidesPerView : s1PerNum,
                watchOverflow: true,
                loopedSlides: 5,
                loop: isLoop($element.find('.swiper-slide'), s1PerNum),
                breakpoints: { 
                    1366: {
                        slidesPerView: 3
                    },
                    960: {
                        slidesPerView: 2
                    },
                    540: {
                        slidesPerView: 1
                    }
                },
                navigation: {
                    prevEl: $element.find('.prev'),
                    nextEl: $element.find('.next')
                }
            }); 
        }

 
        $('.tab li').click(function() {
            $('.tab li').removeClass('current');
            $(this).addClass('current');
            var clickIndex = $(this).index();
            $currentLI = $('.text-slider > li').removeClass('active').eq(clickIndex).addClass('active');
            if (!$currentLI.data('initState')) {
                initSwiper($currentLI);
                $currentLI.data('initState', true);
            }
        }).eq(0).trigger('click'); 

遍历实例化swiper的更多相关文章

  1. swiper3初始化/swiper-init/用data实例化swiper/data-swiper

    Framework7直接用data属性实例化swiper用起来很爽,刚好最近又用到swiper插件,自己写一个 HTML <div class="swiper-container sw ...

  2. swiper插件的使用demo

    老习惯,废话不多说,直接上代码 1.PC端,swiper2,滑动效果 先要引入idangerous.swiper2.7.6.css和idangerous.swiper2.7.6.js(需要先引入jqu ...

  3. swiper.js 碰到的坑

    1. swiper隐藏之后,再显示,滑动不流畅,且无限滑动会失败: 解决方法: 添加一下两个属性 observer: true,//修改swiper自己或子元素时,自动初始化swiper observ ...

  4. vue中引入swiper(vue中的滑块组件vue-awesome-swiper)

    第一步安装 npm install vue-awesome-swiper --save 第二部在main.js中引入 import VueAwesomeSwiper from 'vue-awesome ...

  5. 【Vue中的swiper轮播组件】

    <template> <swiper :options="swiperOption" ref="mySwiper"> <!-- s ...

  6. (网页)swiper.js轮播图插件

    Swiper4.x使用方法 1.首先加载插件,需要用到的文件有swiper.min.js和swiper.min.css文件.可下载Swiper文件或使用CDN. <!DOCTYPE html&g ...

  7. swiper在vue中的使用 及 神坑

    一.实例化和导入 import Swiper from 'swiper'; let viewSwiper; let previewSwiper; 在外面声明全局变量,然后在初始化方法里面实例化swip ...

  8. Vue如何使用vue-awesome-swiper实现轮播效果

    在Vue项目中如何实现轮播图的效果呢,在传统项目中第一个想到的一般都是swiper插件,代码简单好用.一开始我也是直接npm安装swiper然后照着之前的传统写法写,然而却没有效果,只会显示图片但没有 ...

  9. React Native For Android 架构初探

    版权声明:本文由王少鸣原创文章,转载请注明出处: 文章原文链接:https://www.qcloud.com/community/article/171 来源:腾云阁 https://www.qclo ...

随机推荐

  1. 容器和Docker

    一.容器 1.虚拟机和容器的区别 (1)为什么要用docker 服务器端开发/部署: 实现更轻量级的虚拟化,方便快速部署, 对于部署来说可以极大的减少部署的时间成本和人力成本 Docker支持将应用打 ...

  2. Linux文本处理三剑客之——grep

    一Linux文本处理三剑客之——grep Linux文本处理三剑客都支持正则表达式 grep :文本过滤( 模式:pattern) 工具,包括grep, egrep, fgrep (不支持正则表达式) ...

  3. 洛谷P1364 医院设置(Floyd)

    题目描述 设有一棵二叉树,如图: 其中,圈中的数字表示结点中居民的人口.圈边上数字表示结点编号,现在要求在某个结点上建立一个医院,使所有居民所走的路程之和为最小,同时约定,相邻接点之间的距离为l.如上 ...

  4. 2019牛客多校第四场D-triples I 贪心

    D-triples 题意 给你一个\(n\),问至少有几个数或运算起来可以等于\(n\),并且输出数量和这个几个数.题目说明给的\(n\)一定符合条件(不会输出\(n= 1\) 之类不存在情况). 思 ...

  5. 【PowerOJ1740&网络流24题】圆桌聚餐(最大流)

    题意: 来自n个不同国家的代表开会,每个国家代表数为ci 会场有m张圆桌,每张桌子可容纳mi人 不希望有同一个国家的代表在同一张桌子上就餐 设计一个合法方案 (n,m<=300) 思路:最大流, ...

  6. POJ 1151 线段树+扫描线(计算矩形面积并)

    前一篇博客有了讲解就不再叙述了 #include<cstdio> #include<cstring> #include<cmath> #include<ios ...

  7. tomcat7以下线程控制

    web server允许的最大线程连接数还受制于操作系统的内核参数设置,通常Windows是2000个左右,Linux是1000个左右. 1.编辑tomcat安装目录下的conf目录下的server. ...

  8. Oracle中使用REGEXP_SUBSTR,regexp_replace,wm_concat函数

    REGEXP_SUBSTR函数格式如下: function REGEXP_SUBSTR(String, pattern, position, occurrence, modifier)__srcstr ...

  9. Openstack组件部署 — Overview和前期环境准备

    目录 目录 前言 软件环境 Openstack 简介 Openstack 架构 Openstack Install Overview 创建Node虚拟机 环境准备 基础设置 Install OpenS ...

  10. 2019 pycharm激活码

    http://lookdiv.com 里面有,钥匙:1211268069 激活码网址里面有 lookdiv.com 里面的钥匙就是lookdiv.com