Swiper 滑块在选项卡上中断

Question

的 Swiper 滑块

代码内部 html

       <!-- Link Swiper's CSS -->
    <link rel="stylesheet" href="http://dagrafixdesigns.com/Images/2008/DA_2017/DA_RSkin/swiper.min.css">



    <!-- Swiper -->
    <div class="swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide"><picture><img src="//dagrafixdesigns.com/Images/2008/DA_2017/DA_RSkin/Slider/Slide1.png"></picture></div>
            <div class="swiper-slide"><picture><img src="//dagrafixdesigns.com/Images/2008/DA_2017/DA_RSkin/Slider/Slide2.png"></picture></div>
            <div class="swiper-slide"><report><module name="LIVESCORING_SUMMARY"/></report></div>
            <div class="swiper-slide"><picture><img src="//dagrafixdesigns.com/Images/2008/DA_2017/DA_RSkin/Slider/Slide3.png"></picture></div>
            <div class="swiper-slide"><report><module name="OWNER_ACTIVITY"/></report></div>
        </div>
        <!-- Add Pagination -->
        <div class="swiper-pagination"></div>
    </div>



    <script src="//cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.1/js/swiper.min.js"></script>

<script>
$( document ).ready(function() {
    var mySwiper = new Swiper ('.swiper-container', {
        loop: true,
        keyboardControl: true,
        pagination: '.swiper-pagination',
        paginationClickable: true,
        spaceBetween: 10,
        nextButton: '.swiper-button-next-icon',
        prevButton: '.swiper-button-prev-icon',
        autoplay:3000,
        speed:1000,
        grabCursor:true,
        roundLengths: true,
                effect: 'fade',
                fade: {
                  crossFade:true
                }
    });
});

</script>

网站加载和滑动效果很好，但是如果您单击选项卡 GAMEDAY、MY TEAM、MISC，并在这些选项卡上向上或向下滚动，然后单击回到主页选项卡，滑块将被冻结。

我已经阅读了一些关于选项卡和刷卡器的报告，并尝试 mod 带有选项卡的脚本，但我似乎无法让它工作。

stack flow post

想保留我的脚本代码，看看为什么标签调出对我不起作用。我根据我的站点选项卡元素调用将 #tabs 替换为 #homepagetabs，但仍然不起作用。

谢谢！

Answer 1

$(document).ready(function(){
        var swiper = new Swiper ('.swiper-container', { 
                           loop: true, 
                           keyboardControl: true, 
                           pagination: '.swiper-pagination',
                           paginationClickable: true, 
                           spaceBetween: 10, 
                           nextButton: '.swiper-button-next-icon',
                           prevButton: '.swiper-button-prev-icon',
                           autoplay:3000,
                           speed:1000,
                           grabCursor:true,
                           roundLengths: true,
                           effect: 'fade',
                           fade: { 
                             crossFade:true 
                           }
                          }                                    
                        });

    $("#tab0").click(function(){
            var swiper = new Swiper ('.swiper-container', { 
                           loop: true, 
                           keyboardControl: true, 
                           pagination: '.swiper-pagination',
                           paginationClickable: true, 
                           spaceBetween: 10, 
                           nextButton: '.swiper-button-next-icon',
                           prevButton: '.swiper-button-prev-icon',
                           autoplay:3000,
                           speed:1000,
                           grabCursor:true,
                           roundLengths: true,
                           effect: 'fade',
                           fade: { 
                             crossFade:true 
                           }                                    
                          }
                        });
});

由于这似乎已经解决了 Swiper 功能问题，您可以尝试再次清理它：

$(document).ready(function(){ 
    initSwiper(); 
    $("#tab0").click(function(){ 
        initSwiper();
    });
});

function initSwiper(){
    var swiper = new Swiper ('.swiper-container', { 
                           loop: true, 
                           keyboardControl: true, 
                           pagination: '.swiper-pagination',
                           paginationClickable: true, 
                           spaceBetween: 10, 
                           nextButton: '.swiper-button-next-icon',
                           prevButton: '.swiper-button-prev-icon',
                           autoplay:3000,
                           speed:1000,
                           grabCursor:true,
                           roundLengths: true,
                           effect: 'fade',
                           fade: { 
                             crossFade:true 
                           }                                    
                          }
                        });
}

Answer 2

$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
  e.target // newly activated tab
  e.relatedTarget // previous active tab
   YourSlideFunction();
})

Swiper 滑块在选项卡上中断

Swiper slider breaks on tabs

html

jquery

tabs

jquery-ui-tabs

swiper