Question

终端开发者。标签中的滑块我没什么问题。我的滑块工作，但当我切换到第二个滑块时，我无法看到它。滑块丢失宽度和高度如果我通过响应工具的firefox滑块生成宽度和高度调整网站大小。我使用了resizeFix()和reInit()，但没有工作

任何人都可以帮助我吗？

HTML

<ul id="tabs-wrapper" class="nav nav-tabs" data-tabs="tabs">
  <li id="tabs-button" class="active"><a href="#home" data-toggle="tab">Projects</a></li>
  <li id="tabs-button"><a href="#profile" data-toggle="tab">Shots</a></li>
</ul>
</div>
<!-- Tab panes -->
<div class="tab-content">
    <!-- First slider -->
  <div class="tab-pane fade in active" id="home">
      <div class="device">
                          <div class="arrows">
                          <a class="arrow-left al1" href="#"></a> 
                          <a class="arrow-right ar1" href="#"></a>
                           </div>
                          <div class="swiper-container s1">
                          <div class="swiper-wrapper" style="width:100%; height:100%;">
                          <div class="swiper-slide">
                              <div class="content-slide">
                                <h3 class="title">Slide with HTML</h3>
                                <a href="#" class="button site">website</a>  
                              </div>      
                              <img class="img-work" src="images/drop1.jpg">
                              </div>
                          <div class="swiper-slide">
                              <div class="content-slide">
                                <h3 class="title">Slide with HTML</h3>
                                <a href="#" class="button site">website</a>  
                              </div>      
                              <img class="img-work" src="images/nu.jpg">
                              </div>      
                          </div>
                          </div>
                          <div class="pagination p1"></div>
                        </div>
    </div>
    <!-- Second slider -->
  <div class="tab-pane fade" id="profile">
    <div class="device">
                          <div class="arrows">
                          <a class="arrow-left al2" href="#"></a> 
                          <a class="arrow-right ar2" href="#"></a>
                           </div>
                          <div class="swiper-container s2">
                          <div class="swiper-wrapper" style="width:100%; height:100%;">
                          <div class="swiper-slide">
                              <div class="content-slide">
                                <h3 class="title">Slide with HTML</h3>
                                <a href="#" class="button site">website</a>  
                              </div>      
                              <img class="img-work" src="images/drop1.jpg">
                              </div>
                          <div class="swiper-slide">
                              <div class="content-slide">
                                <h3 class="title">Slide with HTML</h3>
                                <a href="#" class="button site">website</a>  
                              </div>      
                              <img class="img-work" src="images/nu.jpg">
                              </div>      
                          </div>
                          </div>
                          <div class="pagination p2"></div>
                        </div>
    </div>

CSS

.swiper-container {  
  width: auto;
  height: auto;
  cursor: default !important;
  min-height: 729px !important;
}

JS

<script>  
   var Swiper1 = new Swiper('.s1',{
    pagination: '.p1',
    loop:true,
    grabCursor: true,
    paginationClickable: true
  })
  $('.al1').on('click', function(e){
    e.preventDefault()
    Swiper1.swipePrev()
  })
  $('.ar1').on('click', function(e){
    e.preventDefault()
    Swiper1.swipeNext()
  })

   var Swiper2 = new Swiper('.s2',{
    pagination: '.p2',
    loop:true,
    grabCursor: true,
    paginationClickable: true
  })
  $('.al2').on('click', function(e){
    e.preventDefault()
    Swiper2.swipePrev()
  })
  $('.ar2').on('click', function(e){
    e.preventDefault()
    Swiper2.swipeNext()
  })

 $('#shots_button').on('click', function() {
      Swiper2.resizeFix() ;
      Swiper2.reInit() ;
  });
  </script>

Answer 1

好的我问题是我使用此代码的引导标签

 $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
        slider2.resizeFix(true);  
        slider1.resizeFix(true);

Answer 2

您需要在Swiper实例上使用'update'方法来获取最新版本的Swiper，而不是使用reInit（）或resizeFix（）。在Swiper 3.4.2上测试：

 $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
    slider.update(); 
 }

resizeFix reInit滑块

2 个答案: