标签上的Swiper滑块断开

Posted 2021-04-21

您好，使用slider home page的Swiper滑块

这是它设置的网站主页。 MY SITE WITH SWIPER SLIDER

代码内部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>

网站加载和幻灯片很好地工作，但是如果您单击TABS GAMEDAY，MY TEAM，MISC，并在这些选项卡上向上或向下滚动，然后单击返回HOME TAB，滑块被冻结。

我已经阅读了一些关于选项卡和swiper的报告，并尝试使用选项卡修改脚本，但我似乎无法让它工作。

stack flow post

想保留我的脚本代码，看看为什么选项卡调用不适合我。我根据我的网站标签元素调用用#homepagetabs替换#tabs，仍然无法正常工作。

谢谢！

答案

$(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 
                           }                                    
                          }
                        });
}

另一答案

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