Why is the slider not working?

Question

css

Sliders are implemented in tabs, but only the first one works, the rest does not display correctly, what is the reason?
the code

Answer 1

var swiper = new Swiper(".mySwiper", {
  slidesPerView: 3,
  spaceBetween: 30,
  observer: true,
  observeParents: true,
  pagination: {
    el: ".swiper-pagination",
    clickable: true,
  },
});

Answer 2

The slider cannot be initialized on a hidden element (most often due to lack of dimensions).
So the initialization of the sliders must be done when opening the tab.
If an adequate solution is used for tabs, then they have an event that fires when the tab is displayed. This is where the initialization of the slider inside this tab is done. In your custom tabs, the slider can be triggered in the fadeIn animation callback.