Swiper slider breaks on tabs

Question

Hello using Swiper slider by slider home page

Here is the website home page it is setup on. MY SITE WITH SWIPER SLIDER

The Code inner 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>

Website loads and slide works nicely, however if you click the TABS GAMEDAY, MY TEAM, MISC, and scroll up or down on any of these tabs, then click back to the HOME TAB the slider is struck frozen.

I have read some reports on tabs and swiper and have tried to mod the script with tabs, but I cant seem to get it to work.

stack flow post

Would like to keep my script code and see why the tabs call out wont work for me. I replaced the #tabs with #homepagetabs per my site tabs element call, still don't work.

Thank you!

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

Since this appears to have resolved the Swiper functionality issues, you can try this to clean it up again:

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