Swiper slider not working unless page is resized

Question

I'm trying to add the Swiper plugin to one of my page. What I'm trying to achieve is to integrate get the carousal slider over here http://idangero.us/swiper/demos/05-slides-per-view.html

HTML

<div class="swiper-container">
  <div class="swiper-wrapper">
    <div class="swiper-slide">Slide 1</div>
    <div class="swiper-slide">Slide 2</div>
    <div class="swiper-slide">Slide 3</div>
    <div class="swiper-slide">Slide 4</div>
    <div class="swiper-slide">Slide 5</div>
    <div class="swiper-slide">Slide 6</div>
    <div class="swiper-slide">Slide 7</div>
    <div class="swiper-slide">Slide 8</div>
    <div class="swiper-slide">Slide 9</div>
    <div class="swiper-slide">Slide 10</div>
  </div>
  <div class="swiper-pagination"></div>
</div>

JS

var swiper = new Swiper('.swiper-container', {
  pagination: '.swiper-pagination',
  slidesPerView: 3,
  paginationClickable: true,
  spaceBetween: 30,
  // Navigation arrows
  nextButton: '.swiper-button-next',
  prevButton: '.swiper-button-prev',
});

When i add it to a fiddle it works but when i add to my html page, the swiper doesnt work until i open firebug or resize the page (http://vidznet.com/ng1/swiper/swipe.html) Im not sure if its conflicting when initializing because There are no errors in the console.

After spending some time I thought it might be a jquery issue and wrapped the coding inside a

pagebeforecreate

 $(document).on( "pagebeforecreate", "#new_",function( event ) { 

but still the same,

I also added the below code

swiper.updateContainerSize();

which is supposed to update the container size, but still not working.

Any help will be much appreciated.

Josiah

adding observer: true, observeParents: true to the config object resolved the issue for me (using v4.1.6 of swiper) – Relent

@Relent Worked for me too. – Roberge

Nice Catch. Had this issue but never noticed resizing makes it work. – Pastel

Answer 1

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 parameters
  • 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!

Gaziantep

observer: true, solved my issue, As i was using vuejs, and need to fetch data after the slider been initialized. thanks. – Interweave

should be the accepted answer here, this solves all update issues you may run into on css calculations. – Lewd

Answer 2

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 !

Garden

@Relent commented this on the OP's question – Melentha

Answer 3

Use this code:

swiper.update();

Tin

In my case, it is React-based app with animations when swipeable content first appears, I had to call it with a small delay in setTimeout – Anchorite

Answer 4

This solved my problem

1. Add this lines in your swiper initialization

   observer: true, observeParents: true,

   your initialization will look like this

   var swiper = new Swiper('.swiper-container', {
       pagination: '.swiper-pagination',
       slidesPerView: 3,
       observer: true,
       observeParents: true,
       paginationClickable: true,
       spaceBetween: 30,
       // Navigation arrows
       nextButton: '.swiper-button-next',
       prevButton: '.swiper-button-prev',
   });
   

2. Then, update your swiper instance with

   swiper.update()
   

Eventide

Answer 5

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

Mosemoseley

Answer 6

For Angular:

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

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

And in your .ts add:

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

Onus

Answer 7

you could try :

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

though it's a bit of a stickytape solution.

Cornea

could you try $(window).trigger('resize'); in a setTimeout function with a one second delay? - not as a solution but just as a test. I suspect as you do that it's to do with loading sequences – Cornea

No need for dependence on jQuery: use window.onload = function() { // Some stuff }; – Santa

Answer 8

I had a similar issue, in my case, I replace the class name swiper-container with swiper in the main container

Frias

wow, i can't believe i got stuck on this stupid mistake. thank you! – Solothurn

Answer 9

For anyone reading this, and using version 6.x of Swiper, you need to import the additional modules (like Navigation, Pagination, etc.) for them to work.

// core version + navigation, pagination modules:
import Swiper, { Navigation, Pagination } from 'swiper';

// configure Swiper to use modules
Swiper.use([Navigation, Pagination]);

// init Swiper:
const swiper = new Swiper(...);

Mccarthy

Here is the list of every module that you shall import swiperjs.com/api/#custom-build – Buckinghamshire

Even in newest swiper (and thats some years) the same bug remains, when using lazy and more images at time, they are not loaded till resize or till interaction with slider, no observer or anything mentioned above works, only way around is to use simple index and load first few images in normal way, all others in lazy way. – Pearlene

Answer 10

I had the similar issue,

in my case adding rebuildOnUpdate: true helped (you may also need observer: true as mentioned above)

p.s. I'm working with react-id-swiper and swiper

Barrus

Answer 11

It worked for me

$(window).trigger('resize');

Sumac

Answer 12

Only add

autoplay: {delay:3000,disableOnInteraction:false}

to parameters

Referee