急求！swiper两个demo在同一个页面怎么写！

zhule

急求！swiper两个demo在同一个页面怎么写！

Hi丁

把名字改一下就可以了啊

zhule

我用sui mobile 框架
var mySwiper = new Swiper('#swiper-container1',{
loop:true,
autoplay : 3000,
autoplayDisableOnInteraction : true,
})
var mySwiper2 = new Swiper('#swiper-container2',{
loop:true,
autoplay : 3000,
autoplayDisableOnInteraction :false,
})

$.init()


这是js，但是html 里面添加了id，也没用，

Hi丁

var mySwiper = new Swiper('#swiper-container1',{
loop:true,
autoplay : 3000,
autoplayDisableOnInteraction : true,
})
var mySwiper = new Swiper('#swiper-container2',{
loop:true,
autoplay : 3000,
autoplayDisableOnInteraction :false,
})

var mySwipe  不要换名字  只更改#id

Hi丁

不好意思  写错了

Hi丁

var swiper = new Swiper('.swiper-container', {scrollbarHide: false,slidesPerView: 'auto',freeMode : true});
var swiperH = new Swiper('.swiper-container-h', {pagination: '.swiper-pagination-h',loop : true, paginationClickable: true});


html代码：
<div class='swiper-container'></div>
<div class='swiper-container-h'></div>

菜鸟来袭

加个类名不行么？js在用类名写一遍？

Swpery

低级的问题 ，啪啪啪啪啪

789998

1. <div class="swiper-container swiper-container-v">
   
2.     <div class="swiper-wrapper ">
   
3.         <div class="swiper-slide ">
   
4.             <div class="swiper-container swiper-container-h" >
   
5.                 <div class="swiper-wrapper swiper-wrapper-h">
   
6.                     <div class="swiper-slide"></div>
   
7.                     <div class="swiper-slide"></div>
   
8.                 </div>
   
9.             </div>
   
10.         </div>
    
11.         <div class="swiper-slide "></div>
    
12.         <div class="swiper-slide "></div>  
    
13.         <div class="swiper-slide "></div>         
    
14.     </div>
    
15. </div>
    
16. <script>
    
17. var swiperV = new Swiper('.swiper-container-h', {
    
18.         pagination: '.swiper-pagination-h',
    
19.         mousewheelControl : true,
    
20. });
    
21. var swiperV = new Swiper('.swiper-container-v', {
    
22.         pagination: '.swiper-pagination-v',
    
23.         direction: 'vertical',
    
24.         mousewheelControl : true,
    
25. });
    
26. </script>

复制代码

xjtarzan

1. <script>
   
2.     var swiperH = new Swiper('.swiper-container-h', {
   
3.         pagination: '.swiper-pagination-h',
   
4.         paginationClickable: true,
   
5.         spaceBetween: 50
   
6.     });
   
7.     var swiperV = new Swiper('.swiper-container-v', {
   
8.         pagination: '.swiper-pagination-v',
   
9.         paginationClickable: true,
   
10.         direction: 'vertical',
    
11.         spaceBetween: 50
    
12.     });
    
13. </script>

复制代码