Display error when loading the page, as well as when changing display: none to block!ERROR

[codebasecodebase]

When working with woocommerce and displaying products through a standard cycle with parameters, I get an error when one large slide with a picture of the product appears before the download starts.

Also, when I go to show the hidden slider with display: none, block is exactly the same sitzia - the slide does not change its state, the state is synchronized only when I select the one that was originally with display: block when the page was loaded.

In addition to this, the slider does not adapt again after clicking on none block, when initially all slide display blocks

Standard code from demo

var swiper1 = new Swiper('.my1', {
observer: true,
observeParants: true,
centeredSlides: true,
breakpoints: {
// when window width is >= 320px
320: {
slidesPerView: 1,
slidesPerGroup: 1,
spaceBetween: 1
},
// when window width is >= 480px
400: {
slidesPerView: 2,
slidesPerGroup: 2,
spaceBetween: 30
},

500: {
  slidesPerView: 3,
  slidesPerGroup: 3,
  spaceBetween: 30
},

600: {
  slidesPerView: 4,
  slidesPerGroup: 4,
  spaceBetween: 30
},
// when window width is >= 640px
780: {
  slidesPerView: 5,
  slidesPerGroup: 5,
  spaceBetween: 25
}},

loop: true,
});

I removed all the css styles, the situation does not change, that's not the point!