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

yushao_vincent

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


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

跳跳

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

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

复制代码

1. <section>
   
2.                         <header class="door-style">产品展示</header>
   
3.                         <!--lb-->
   
4.                         <div class="swiper-container">
   
5.                           <div class="swiper-wrapper">
   
6.                             <div class="swiper-slide"><a href="#"><img src="images/lb.gif"/><span>混油玉兰白木门  简欧式油漆门</span></a></div>
   
7.                             <div class="swiper-slide"><a href="#"><img src="images/lb.gif"/><span>混油玉兰白木门  简欧式油漆门1</span></a></div>
   
8.                             <div class="swiper-slide"><a href="#"><img src="images/lb.gif"/><span>混油玉兰白木门  简欧式油漆门2</span></a></div>
   
9.                           </div>
   
10.                           <div class="swiper-pagination"></div>
    
11.                         </div>
    
12.                         <!--lb-->
    
13.                        
    
14.                 </section>
    
15.                 <section>
    
16.                         <header class="door-style">产品展示</header>
    
17.                         <!--lb-->
    
18.                         <div class="swiper-container">
    
19.                           <div class="swiper-wrapper">
    
20.                             <div class="swiper-slide"><a href="#"><img src="images/lb.gif"/><span>混油玉兰白木门  简欧式油漆门</span></a></div>
    
21.                             <div class="swiper-slide"><a href="#"><img src="images/lb.gif"/><span>混油玉兰白木门  简欧式油漆门1</span></a></div>
    
22.                             <div class="swiper-slide"><a href="#"><img src="images/lb.gif"/><span>混油玉兰白木门  简欧式油漆门2</span></a></div>
    
23.                           </div>
    
24.                           <div class="swiper-pagination"></div>
    
25.                         </div>
    
26.                         <!--lb-->
    
27.                        
    
28.                 </section>

复制代码

引入我写的js

1. $(function(){
   
2.         //多个swiper一个页面
   
3.         $.extend({
   
4.                 "swiperOption":function(f1,f2){
   
5.                                 new Swiper(f1, {
   
6.                 pagination: f2,
   
7.                 slidesPerView: 1,
   
8.                 centeredSlides: true,
   
9.                 paginationClickable: true,
   
10.                 loop:true,
    
11.                 autoplay: 2500,
    
12.               autoplayDisableOnInteraction: false,
    
13.                     });                
    
14.                 },
    
15.         });                      
    
16.         $(".swiper-container").each(function(index){
    
17.                 $.swiperOption($(this),$(this).find(".swiper-pagination"));
    
18.         });
    
19. })

复制代码

Jiang

如上 以此类推。。。。。

刘辉

跳跳 发表于 2015-12-2 16:57
常规代码，并且需引入基本的

强大。直接写了一个函数给封装了！但如何，将navigation也分别控制呢？

moahmn

急求解答。。。。论坛的答案好像没对的

DOOM

顶顶顶顶顶顶顶顶顶顶顶顶,同问

管小猫66

顶！d=====(￣▽￣*)b

树根

你直接在外面加一个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){

qianjiuzhou

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

felly100