一个页面用如何用多个Swiper？

yushao_vincent · 发表于 2015-5-13 10:29:17

一个页面用如何用多个Swiper而不互相影响？
<script>
var swiper = new Swiper('.swiper-container1');
</script>

将上面的.swiper-container改为.swiper-container1也不行。是否需要在css中增加.swiper-container1？

跳跳 · 发表于 2015-12-2 16:57:27

常规代码，并且需引入基本的

<link rel="stylesheet" type="text/css" href="global/swiper.css"/>
<script src="js/jquery-2.1.4.min.js" type="text/javascript" charset="utf-8"></script>
<script src="global/swiper.min.js" type="text/javascript" charset="utf-8"></script>

复制代码

<section>
<header class="door-style">产品展示</header>
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide"><a href="#"><img src="images/lb.gif"/><span>混油玉兰白木门简欧式油漆门</span></a></div>
<div class="swiper-slide"><a href="#"><img src="images/lb.gif"/><span>混油玉兰白木门简欧式油漆门1</span></a></div>
<div class="swiper-slide"><a href="#"><img src="images/lb.gif"/><span>混油玉兰白木门简欧式油漆门2</span></a></div>
</div>
<div class="swiper-pagination"></div>
</div>
</section>
<section>
<header class="door-style">产品展示</header>
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide"><a href="#"><img src="images/lb.gif"/><span>混油玉兰白木门简欧式油漆门</span></a></div>
<div class="swiper-slide"><a href="#"><img src="images/lb.gif"/><span>混油玉兰白木门简欧式油漆门1</span></a></div>
<div class="swiper-slide"><a href="#"><img src="images/lb.gif"/><span>混油玉兰白木门简欧式油漆门2</span></a></div>
</div>
<div class="swiper-pagination"></div>
</div>
</section>

复制代码

引入我写的js

$(function(){
//多个swiper一个页面
$.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"));
});
})

复制代码

Jiang · 发表于 2015-6-5 18:19:18

如上以此类推。。。。。

admin · 发表于 2015-5-13 11:28:38

一般不要改类名.swiper-container，这个是写在了css里面的，可以加一些id，例如这样
var swiper1 = new Swiper('#swiper1');
var swiper2 = new Swiper('#swiper2');

小七 · 发表于 2015-5-13 17:44:34

有分页器时不行啊

admin · 发表于 2015-5-14 09:35:03

分页器也需要用不同的ID，和分页器放在哪个容器内没有关系。
pagination : '#swiper1 .swiper-pagination',
pagination : '#swiper2 .swiper-pagination',

Jiang · 发表于 2015-6-5 18:18:37

<div class="swiper-container swiper-container1">
<div class="swiper-wrapper">
      <div class="swiper-slide"></div>
      <div class="swiper-slide"></div>
</div>
</div>

<div class="swiper-container swiper-container2">
<div class="swiper-wrapper">
      <div class="swiper-slide"></div>
      <div class="swiper-slide"></div>
</div>
</div>

var swiper1 = new Swiper('.swiper-container1', {
      pagination: '.swiper-pagination1',
});

var swiper2 = new Swiper('.swiper-container2', {
      pagination: '.swiper-pagination2',
});

felly100 · 发表于 2015-6-9 11:51:37

qianjiuzhou · 发表于 2015-7-3 10:56:24

不行啊，下面的焦点不会随着内容的切换改变

树根 · 发表于 2015-7-15 11:47:47

你直接在外面加一个DIV就可以了
var swiper01 = new Swiper('.swiper-container-title .swiper-container', {
         slidesPerView:4,
         paginationClickable: true,
         spaceBetween :8
      });
      var swiper02 = new Swiper('.swiper-container-content .swiper-container', {
        slidesPerView:1,
        paginationClickable: true,
         spaceBetween :0,
         cssWidthAndHeight :true,
         onTransitionEnd:function(swiper){