关于一个页面中多处使用 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"));
- });
来源: http://www.bubuko.com/infodetail-2876698.html