急~ swiper 和选项卡配合的问题

immm

1. <div class="tab-content">
   
2.         <ul>
   
3.             <li><a href=""></a></li>
   
4.             <li><a href=""></a></li>
   
5.             <li><a href=""></a></li>
   
6.         </ul>
   
7.         <div class="content-item">
   
8.             <div class="item">
   
9.                 <div class="swiper-container">...</div>
   
10.             </div>
    
11.             <div class="item">
    
12.                 <div class="swiper-container">...</div>
    
13.             </div>
    
14.             <div class="item">
    
15.                 <div class="swiper-container">...</div>
    
16.             </div>
    
17.         </div>
    
18.     </div>
    
19. // 这是我的html页面结构

复制代码

如图一样，只有第一个默认显示的选项卡是有效果的，能滑动啥的，第二个和第三个不知道为什么就不能滑动。手一拉都拉屏幕外边去了。。
急阿，求大神解答下阿！！！！

1. $(document).ready(function () {
   
2. 
   
3.     // swiper
   
4. 
   
5.     var mySwiper = new Swiper('.swiper-container', {
   
6.         slidesPerView: 1.5
   
7.     });
   
8. 
   
9.     $('.tab-content > ul').find('li').click(function () {
   
10.         $(this).addClass('active').siblings().removeClass('active');
    
11. 
    
12.     });
    
13.     var $tab_nav = $('.tab-content > ul >li');
    
14.     $tab_nav.click(function () {
    
15.         var index = $tab_nav.index(this);
    
16.         $('.content').children('.content-item').eq(index).show().siblings().hide();
    
17. 
    
18.     });
    
19. 
    
20. });
    
21. //jq

复制代码

shanglvchen

参考官网的例子哇

糯米i

...

1024

不知道楼主解决没有，我今天也遇到了。是因为 display: none; 引起的。
解决方法：每次切换的时候重新 new 一个swiper。