Почему swiper ведет себя так в grid сетке если добавлять обертку?

Question

[godsplane]

Сейчас там огромная картинки , по идеи должно быть 3 разных слайдера в грид элементе.
Если я делаю так

<div class="product-wrapper">

        <div class="swiper-container product-item">
          <div class="swiper-wrapper">
            <div class="image swiper-slide">
              <img src="<?php bloginfo('template_url');?>/images/dist/item/1.jpg" alt="">
            </div>
            <div class="image swiper-slide">
              <img src="<?php bloginfo('template_url');?>/images/dist/item/1.jpg" alt="">
            </div>
            <div class="image swiper-slide">
              <img src="<?php bloginfo('template_url');?>/images/dist/item/1.jpg" alt="">

            </div>
          </div>
          <div class="swiper-pagination"></div>
          <!-- If we need navigation buttons -->
          <div class="swiper-button-prev"></div>
          <div class="swiper-button-next"></div>

        </div>
        <div class="swiper-container product-item">
          <div class="swiper-wrapper">
            <div class="image swiper-slide">
              <img src="<?php bloginfo('template_url');?>/images/dist/item/1.jpg" alt="">
            </div>
            <div class="image swiper-slide">
              <img src="<?php bloginfo('template_url');?>/images/dist/item/1.jpg" alt="">
            </div>
            <div class="image swiper-slide">
              <img src="<?php bloginfo('template_url');?>/images/dist/item/1.jpg" alt="">

            </div>
          </div>
          <div class="swiper-pagination"></div>
          <!-- If we need navigation buttons -->
          <div class="swiper-button-prev"></div>
          <div class="swiper-button-next"></div>

        </div>
        <div class="swiper-container product-item">
          <div class="swiper-wrapper">
            <div class="image swiper-slide">
              <img src="<?php bloginfo('template_url');?>/images/dist/item/1.jpg" alt="">
            </div>
            <div class="image swiper-slide">
              <img src="<?php bloginfo('template_url');?>/images/dist/item/1.jpg" alt="">
            </div>
            <div class="image swiper-slide">
              <img src="<?php bloginfo('template_url');?>/images/dist/item/1.jpg" alt="">

            </div>
          </div>
          <div class="swiper-pagination"></div>
          <!-- If we need navigation buttons -->
          <div class="swiper-button-prev"></div>
          <div class="swiper-button-next"></div>

        </div>
      </div>

То все окей, но если я добавляю обертку (которая мне нужно для контенат под каждый слайдером). то все ломается. Я не могу понять почему.

Comments

[Steppp]

Эх, а хотелось бы посмотреть на это(