javascript - resizeFix 重新初始化 slider

Question

终端开发人员。我对选项卡中的 slider 没有什么问题。我的 slider 可以工作，但是当我切换到第二个 slider 时我看不到它。 slider 丢失宽度和高度 如果我通过 firefox slider 的响应工具调整网站大小， slider 会生成宽度和高度。我使用了 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

对于最新版本的 Swiper，您需要在 Swiper 实例上使用“更新”方法来代替 reInit() 或 resizeFix() 之类的方法。 在 Swiper 3.4.2 上测试:

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