Why does the Swiper slider only initialize after resizing?

Question

Slider

I made up the page sandbox.maximshadrin.ru/vologda_lessons/main.html
It has a lot of sliders. For them I use the swiper component idangero.us/swiper/demos There
is a problem with one of the slides.
I can't figure out why it pops up.
In the Tours section, when you click on the 1st block, a popup opens.



This popup is already on the page, it's just hidden and displayed when clicked, i.e. There can be no problems with dynamic ajax loading of content in a popup, because the content is already on the page.



Actually, the slider inside this popup does not work fully until you change the page size, you can simply minimize and maximize the window. I don't understand where this bug comes from. Most likely, the matter is in a bunch of swiper - magnific popup, but what exactly is the problem, I'll never know.

Answer 1

Most of these plugins do not know how to initialize a slider inside an element with display: none. These sliders don't have sizes. After opening the popup window, you need to re-initialize the slider.
The listener inside the slider plugin is most likely to change the window size, which reinitializes it, so after resizing everything works fine.