• Can’t access swiper js instance of a glider. I have been using the following code to manipulate settings of swiper that are not accessible via the UI in Elementor.

    const imageCarousel = jQuery ( ‘.mobileslider .swiper-container-horizontal’ ),
    swiperInstance = imageCarousel.data( ‘swiper’ );

    I would need to make it work also for the glider. for some reason I get undefined for the second line. I don’t understand why since I am getting the right element – if i run it in the console I can see this element has the swiper properties.

    Thanks for help! Love the plugin btw.

    The page I need help with: [log in to see the link]

Viewing 4 replies - 1 through 4 (of 4 total)
  • Plugin Contributor Oooh Boi

    (@ooohboi)

    The console doesn’t tell you the script load priority, it rather writes out everything at once. Swiper/Glider should have an ID instead of the custom class name, that’s for sure. Here’s something that might help

    ;(function() {
    
        // chck if DOM is being loaded
        document.addEventListener('DOMContentLoaded', run_stuff);
    
        // DOM loaded, run all we got
        function run_stuff() {
    
            // debounce with delay
            let debounce = function(func) {
                let timer;
                return function(event) {
                    if (timer) clearTimeout(timer);
                    timer = setTimeout(func, 400, event);
                };
            }
    
            // listen to resize event with debounce, swiper requires refresh
            window.addEventListener("resize", debounce(function(e) {
    
                fine_tune_swiper();
    
            }));
    
            // prevent the backend error, elementor gets loaded even after the "DOMContentLoaded"
            let chck_if_elementor_loaded = setInterval(function() {
    
                if (window.elementorFrontend) {
    
                    // clear interval
                    clearInterval(chck_if_elementor_loaded);
                    // ------------------------
    
                    fine_tune_swiper(); // now do all the changes
    
                }
    
            }, 500);
    
        }
    
        /* modify swiper */
        function fine_tune_swiper() {
    
            // for instance...	
            let contract_swiper = jQuery('#your-swiper-id .swiper-container');
            let swiper_itself = contract_swiper.data('swiper');
    
            swiper_itself.params.slidesPerView = 1.2;
            swiper_itself.params.centeredSlides = true;
    
            swiper_itself.update();
    
        }
    
    })();
    Thread Starter jcwebtech

    (@jcwebtech)

    Hello,

    thank you for the reply. I understand this falls little out of the scope of the plugin so I relay appreciate your help.

    Unfortunately I have the same problem. I think it comes down to the fact that the wrapping div element <div class="ob-swiper-bundle swiper swiper-container-initialized swiper-container-horizontal swiper-container-android" > is injected by javascript. On the first run of the code this element is not found bi this line:
    let contract_swiper = jQuery('#your-swiper-id .swiper-container');

    On the second run (triggered by resizing the window) it is found but then it still runs into error saying the swiper_itself is undefined.

    
    Uncaught TypeError: Cannot read properties of undefined (reading 'params')
        at fine_tune_swiper ((index):1281:23)
        at (index):1252:13
    

    Thank you.

    I would love to make this work!

    I get the same issue. I can’t find class “swiper-container” when I inspect glider slider element.
    Please help me! Thank you!

    Thread Starter jcwebtech

    (@jcwebtech)

    @philophuong just to confirm, I was not able to make it work. I could modify any slider using swiperJS, but glider.

    @ooohboi It would be great if there was a field within glider settings, where we could edit the swiper settings in a text format and add any properties.

    Also not sure why every plugin including Steroids allows only int number of slides to display? Especially on mobile you often want to show just a part of the next slide.

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Can’t access swiper js instance of a glider’ is closed to new replies.