Swiper中文论坛

标题: 一个页面用如何用多个Swiper？ [打印本页]
作者: yushao_vincent    时间: 2015-5-13 10:29
标题: 一个页面用如何用多个Swiper？
一个页面用如何用多个Swiper而不互相影响？
<script>
    var swiper = new Swiper('.swiper-container1');
    </script>


将上面的.swiper-container改为.swiper-container1也不行。是否需要在css中增加.swiper-container1？
作者: admin    时间: 2015-5-13 11:28
一般不要改类名.swiper-container，这个是写在了css里面的，可以加一些id，例如这样
var swiper1 = new Swiper('#swiper1');
var swiper2 = new Swiper('#swiper2');
作者: 小七    时间: 2015-5-13 17:44
有分页器时不行啊
作者: admin    时间: 2015-5-14 09:35
分页器也需要用不同的ID，和分页器放在哪个容器内没有关系。
pagination : '#swiper1  .swiper-pagination',
pagination : '#swiper2  .swiper-pagination',
作者: Jiang    时间: 2015-6-5 18:18
<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',
    });

作者: Jiang    时间: 2015-6-5 18:19
如上 以此类推。。。。。
作者: felly100    时间: 2015-6-9 11:51
                                       
作者: qianjiuzhou    时间: 2015-7-3 10:56
不行啊，下面的焦点不会随着内容的切换改变
作者: 树根    时间: 2015-7-15 11: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){
作者: 跳跳    时间: 2015-12-2 16:57
常规代码，并且需引入基本的
  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. })
复制代码

作者: 管小猫66    时间: 2015-12-9 00:38
顶！d=====(￣▽￣*)b
作者: DOOM    时间: 2015-12-9 10:36
顶顶顶顶顶顶顶顶顶顶顶顶,同问
作者: moahmn    时间: 2015-12-9 21:13
急求解答。。。。论坛的答案好像没对的
作者: 刘辉    时间: 2018-10-15 11:41
跳跳 发表于 2015-12-2 16:57
常规代码，并且需引入基本的

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



欢迎光临 Swiper中文论坛 (http://bbs.swiper.com.cn/) Powered by Discuz! X3.2