Swiper slider not working unless page is resized

Question

Swiper's sliders, in order to work properly, requires you to either:

• initialize them when they are visible;
• update them when they get visible;
• enable observer paramenters.
  • observer: true;
  • observeParents: true.

As stated by Isaiahiroko and Swiper's creator (on this issue), executing one of the mentioned topics will solve your issue, for sure!

Also i had face this problem , i think you should add two lines (Parameters) in the Java Script of swipper ,

var galleryThumbs = new Swiper('.gallery-thumbs', {
            observer: true,
            observeParents: true,
            loop: true,
            spaceBetween: 10,
            slidesPerView: 4,
            freeMode: true,
            watchSlidesVisibility: true,
            watchSlidesProgress: true,
        })

Where "obeserver : true" And "observerParents : true" are the parameters which effects your swipper to be work properly. This make my swipper working in properly ! Hope you get done !

Use this code:

swiper.update();

I tried below code it worked for me my swiper was present inside a tab, when my document is loaded swipper was not working unless and unless I resize the screen,so i tried below code it worked

var swiper = new Swiper('#upcoming-appointments', {
        slidesPerView: 1,
        spaceBetween: 30,
        loop: true,
        pagination: {
            el: '.swiper-pagination',
            clickable: true,
        },
        navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
        },
//<---Add this two lines in your code-->   
       observer: true,  
       observeParents: true,
    });

you could try :

$(window).on({
   load: function(){
      $(this).trigger('resize');
    } 
  });

though it's a bit of a stickytape solution.

For Angular:

Add (swiper)="onSwiper($event)" to your swiper component.

<swiper (swiper)="onSwiper($event)"></swiper>

And in your .ts add:

onSwiper(swiper) {
  swiper.update();
}