Slider doesn't work from time to time

Question

I added a swiper slider to a woocommerce site. The slider doesn't always work on variable items, most of the times it just shows a list of images.

The reason could be that the page doesn't fully renders until I'm initializing the slider. I've tried initializing the slider inside $(window).on('load', function(){}) but it didn't help.

Any suggestions ?

Variable item: https://escooter-shop.at/shop/e-scooter/e-scooter-easy-rider/

Simple item (works well): https://escooter-shop.at/shop/e-scooter/e-scooter-inmotion-l6/

The code:

$(window).on('load', function(){
  console.log('Window on.load reached')
  $('.single-product .thumbnails a').wrap('<div class="swiper-slide" />');
  $('.swiper-slide').wrapAll( '<div class="swiper-wrapper"></div>');
  $('.swiper-wrapper').wrapAll( '<div class="swiper-container"></div>');

  $('<div class="swiper-button-prev"></div>').insertAfter( $('.swiper-wrapper'));
  $('<div class="swiper-button-next"></div>').insertAfter( $('.swiper-button-prev'));

  var mySwiper = new Swiper ('.swiper-container', {
    direction: 'horizontal',
    loop: true,
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    },
    slidesPerView: 3,
    spaceBetween: 40,
    breakpoints: {
      480: {
        slidesPerView: 2
      },
    }
  });
});

Try $(document).ready() instead of $(window).load() See: https://stackoverflow.com/questions/3698200/window-onload-vs-document-ready — Derek Nolan, Oct 27 '17 at 14:57
@DerekNolan Thanks for your suggestion, I started with executing this code inside $(document).ready(), it didn't work so I switched to $(window).load() — user3297120, Oct 27 '17 at 18:31
out of curiosity, what happens if you take all the code out of the $(window).load() function? Does it still work? — Derek Nolan, Oct 27 '17 at 19:23
How did you include the external js file? Did you use functions.php? — Derek Nolan, Oct 27 '17 at 20:37
Possible duplicate of [Is there a JavaScript/jQuery DOM change listener?](https://stackoverflow.com/questions/2844565/is-there-a-javascript-jquery-dom-change-listener) — Makyen, Oct 28 '17 at 09:22

score 0 · Answer 1 · answered Oct 28 '17 at 09:00

My solution is to reinitialize the slider after 4 seconds. That is enough for variable product page to be fully loaded. Now I have simple items loaded with slider and variable products with slider added after 4 sec.

  // Initializing the product images slider
  var sliderInit = function(){
    $('.single-product .thumbnails a').wrap('<div class="swiper-slide"/>');
    $('.swiper-slide').wrapAll( '<div class="swiper-wrapper"></div>');
    $('.swiper-wrapper').wrapAll( '<div class="swiper-container"></div>');

    $('<div class="swiper-button-prev"></div>').insertAfter( $('.swiper-wrapper'));
    $('<div class="swiper-button-next"></div>').insertAfter( $('.swiper-button-prev'));

    var mySwiper = new Swiper ('.swiper-container', {
      direction: 'horizontal',
      loop: true,
      navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
      },
      slidesPerView: 3,
      spaceBetween: 40,
      breakpoints: {
        480: {
          slidesPerView: 2
        },
      }
    });
  };

  // reinitializing the product images slider for variable products
  setTimeout(function(){ 
    if($('.thumbnails .swiper-container').length < 1 ){
      sliderInit();
    }
  }, 4000);

Slider doesn't work from time to time

1 Answers1