一个页面可以写2个SWIPER？

onceseo · 发表于 2016-7-26 09:44:12

我做的是一个PC端网站，有2块部分需要用到滑动，需要用2个SWIPER的，这个可以实现？

qianjiwan · 发表于 2016-7-26 16:22:38

可以参考这个var swiper = new Swiper('#slider_1',{
pagination: '#slider_1 .swiper-pagination',
slidesPerView:1,
paginationClickable: true,
loop: true,
autoplay:3000,
calculateHeight:true,

});
var swiper = new Swiper('#slider_2',{
pagination: '#slider_2 .swiper-pagination',
slidesPerView:1,
paginationClickable: true,
loop: true,
autoplay:3000,
calculateHeight:true
});

onceseo · 发表于 2016-7-26 16:27:33

好的谢谢

onceseo · 发表于 2016-7-26 16:34:34

qianjiwan 发表于 2016-7-26 16:22
可以参考这个var swiper = new Swiper('#slider_1',{
pagination: '#slider_1 .swiper-pagination',
...

<div class="swiper-container div1Lunbo">
         <div class="swiper-wrapper">
            <div class="swiper-slide"><img src="images/3.png" /></div>
            <div class="swiper-slide"><img src="images/23.png" /></div>
            <div class="swiper-slide"><img src="images/22.png" /></div>
         </div>
         
         <div class="swiper-pagination"></div>
   </div>

<script>
      var swiper = new Swiper('.swiper-container', {
           pagination: '.swiper-pagination',
           paginationClickable: true,
        loop: true,
           autoplay : 2000,
           speed:2000,
        autoplayDisableOnInteraction:false,
});
</script>

这个2部分是我的HTML 代码我现在需要在同一个页面再添加一个图片轮播的功能，请问该怎么写，我把类名为swiper-container，修改了之后。页面就错位了

qianjiwan · 发表于 2016-7-26 18:32:16

<div class="container1">
<div class="swiper-container div1Lunbo">
                                    <div class="swiper-wrapper">
                                          <div class="swiper-slide"><img src="images/3.png" /></div>
                                          <div class="swiper-slide"><img src="images/23.png" /></div>
                                          <div class="swiper-slide"><img src="images/22.png" /></div>
                                    </div>
                                    
                                    <div class="swiper-pagination"></div>
                                       </div>
</div>

<script>
                  var swiper = new Swiper('.container1 .swiper-container', {
                     pagination: '.swiper-pagination',
                     paginationClickable: true,
            loop: true,
                     autoplay : 2000,
                     speed:2000,
            autoplayDisableOnInteraction:false,
         });
         </script>