Swiper in a modal


#1

I want to show the swiper in a modal which shows different images in a 1 by 1 view.
I set the properties Auto Height - Centered Slides - Autoplay - Loop.

When I run it in the browser the modal shows only the first image, no autoplay, no action on the controls.
Although I didn’t activate the Grab Cursor I can Grab the images .

http://webcrea.be/swipe_in_modal.html


#2


I can see the control and the left/right buttons work too.
It maybe that buttons are not visible on the first image due to white background.


#3

The only way I could get the pictures to move is to click and hold then drag - clicking the arrows did not change the photo (I’m on a MAC using Safari)…


#4

Hi @vdweyer,
The way Bootstrap Modals work require the Swiper to be initialized once the modal is displayed. I will check if we can add an initialize event for the Swiper in the next update, so you can call it on Modal Show event.

@patrick will check this.


#5

Great, I wait for it .
For the time being I use the slideshow in the modal. But I prefer the swiper having a far better flow than the slideshow.


#6

I did the update but still the swiper doesn’t work in a modal. It works when I set the modal: Autoshow. But that isn’t the way I want. :expressionless:


#7

Is this fixed in 1.9.0.
I updated and published the new js files but still not working ?


#8

From what I understand in this topic is that the swiper component requires to be initialized on show? If so then add an dynamic event shown to the modal and from there run the update action of the swiper, this should update/refresh the swiper in the modal. The update action was added in the 1.9.0 update.


#9

What I write in action please ?


#10

You can select it with the picker by clicking on the icon next to the input.

Here is what should be added:

swiper1.update()

#11

Okay - that’s what I needed.
Thank you for quick reply !

Now I can show images with different sizes which is a problem in the Slideshow.

http://webcrea.be/swipe_in_modal.html


unassigned patrick #12