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.

adding `observer: true, observeParents: true` to the config object resolved the issue for me (using v4.1.6 of swiper) — Isaiahiroko, Apr 15 '18 at 23:17
Nice Catch. Had this issue but never noticed resizing makes it work. — Shalin Nipuna, Jan 22 '21 at 11:09

score 51 · Answer 1 · edited Jul 15 '22 at 02:40

51

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!

edited Jul 15 '22 at 02:40

Penny Liu

15,447
5
79
98

answered Jun 11 '19 at 01:54

observer: true, solved my issue, As i was using vuejs, and need to fetch data after the slider been initialized. thanks. – Aug 02 '20 at 09:00
1

should be the accepted answer here, this solves all update issues you may run into on css calculations. – rx2347 Feb 24 '21 at 11:57

Adarsh Bhalani · Answer 2 · 2021-03-02T11:36:31.943

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 !

@Isaiahiroko commented this on the OP's question – Zmart Mar 20 '20 at 04:56 — Zmart, Mar 20 '20 at 04:56

score 13 · Answer 3 · answered Jul 18 '17 at 18:43

13

Use this code:

swiper.update();

answered Jul 18 '17 at 18:43

Nechemya Kanelsky

663
7
17

4

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` – amankkg Dec 21 '19 at 15:37

score 3 · Answer 4 · answered Jan 29 '20 at 09:53

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

score 3 · Answer 5 · answered Aug 08 '21 at 08:45

3

For Angular:

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

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

And in your .ts add:

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

answered Aug 08 '21 at 08:45

Zahema

1,345
2
19
35

score 2 · Answer 6 · answered Aug 17 '21 at 01:10

This solved my problem

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

Then, update your swiper instance with

swiper.update()

score 1 · Answer 7 · answered May 03 '17 at 22:55

1

you could try :

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

though it's a bit of a stickytape solution.

answered May 03 '17 at 22:55

Sam0

1,459
1
11
13

1

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 – Sam0 May 04 '17 at 16:57

score 0 · Answer 8 · edited Oct 01 '20 at 22:28

0

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(...);

edited Oct 01 '20 at 22:28

Dharman

30,962
25
85
135

answered Oct 01 '20 at 22:22

daveaspinall

1,395
1
17
28

Here is the list of every module that you shall import https://swiperjs.com/api/#custom-build – Raphaël Balet Nov 11 '20 at 10:17
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. – Jiro Matchonson Nov 11 '20 at 23:39

score 0 · Answer 9 · answered Jan 12 '21 at 08:12

0

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

answered Jan 12 '21 at 08:12

Anastasia Plaskevich

135
5

score 0 · Answer 10 · answered Oct 24 '21 at 12:18

0

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

answered Oct 24 '21 at 12:18

Arshad Khan

1

score -2 · Answer 11 · edited Jul 14 '22 at 15:06

-2

Only add

autoplay: {delay:3000,disableOnInteraction:false}

to parameters

edited Jul 14 '22 at 15:06

Penny Liu

15,447
5
79
98

answered Nov 13 '21 at 14:26

Julio González

1

Swiper slider not working unless page is resized

11 Answers11

Linked