CODEWITHSUNDEEP
wordpresselementorswiper.js
user15323063
user15323063

Reputation:

Swiper Slider is not working in tabs wordpress elementor

I am trying to load the carousel (swiper slider) inside some tabs in Elementor WordPress. The carousel works fine before clicking on tabs, but whenever I click on tabs, the carousel shows but does not "slide".
I have seen few questions regarding this topic and tried their solutions, but no luck.
Right now, I am trying this code in (child-theme/function.php) which is giving me an error:

Error -> "Uncaught TypeError: Cannot read property 'params' of undefined"

add_action('wp_footer', 'swiperCarousel', 9999999999);
function swiperCarousel() {
    ?>
    <script>
var refreshSliders = function(){

        jQuery( ".swiper-container" ).each(function( index ) {
            swiperInstance = jQuery(this).data('swiper');
            swiperInstance.params.observer = true;
            swiperInstance.params.observeParents = true;
            swiperInstance.update();
        });

}

window.onload = function()
{
    console.log('Document loaded');
   
   jQuery("#aws-carousel-switcher").on("click", function(){ 
       console.log('Tab has been clicked');
            var $this = jQuery(this);
    
    refreshSliders();
    
    jQuery('html,body').animate({
                        scrollTop: $this.offset().top - 220
                    }, 500); 

        
    });
}
    </script>
    <?php
}

The error is being generated from this line:

 swiperInstance.params.observer = true;

Upvotes: 1

Views: 3403

Answers (1)

Chirag Gohil
Chirag Gohil

Reputation: 31

this will work for you.

jQuery(".swiper-container li").click(function(){
    setTimeout(function(){ window.dispatchEvent(new Event('resize')); }, 1000);

})

select your respective tab selector.

Upvotes: 3

Related Questions