Как сделать так, чтобы слайдер. js (Thumbs Gallery) отображался как блок, а не как встроенный

Question

когда я помещаю его в div, раздел или что-то, что является блоком, он исчезает, и, конечно, я хотел бы добавить поля, отступы и прочее, но он встроен.

I ' мы пытались изменить отображение css на блок каждого отдельного класса и элемента и на встроенный блок, но это не сработало. Я также попытался поместить изображения в div и попытаться сопоставить их с размером объекта и положением объекта, но все еще не отображать в виде блока. Я уже потерял 4 часа в поисках решения самостоятельно, но чувствую, что больше ничего не могу ...

это код

html

<!-- Swiper -->
  <div class="swiper-container gallery-top swiper2">
    <div class="swiper-wrapper">
      <div class="swiper-slide ss2" style="background-image:url(/img/hero.jpg)"></div>
      <div class="swiper-slide ss2" style="background-image:url(/img/hero.jpg)"></div>
      <div class="swiper-slide ss2" style="background-image:url(/img/hero.jpg)"></div>
      <div class="swiper-slide ss2" style="background-image:url(/img/hero.jpg)"></div>
    </div>
    <!-- Add Arrows -->
    <div class="swiper-button-next swiper-button-white"></div>
    <div class="swiper-button-prev swiper-button-white"></div>
  </div>
  <div class="swiper-container gallery-thumbs">
    <div class="swiper-wrapper">
      <div class="swiper-slide ss2" style="background-image:url(/img/hero.jpg)"></div>
      <div class="swiper-slide ss2" style="background-image:url(/img/hero.jpg)"></div>
      <div class="swiper-slide ss2" style="background-image:url(/img/hero.jpg)"></div>
      <div class="swiper-slide ss2" style="background-image:url(/img/hero.jpg)"></div>

    </div>
  </div>

  <!-- Swiper JS -->

javascript

var galleryThumbs = new Swiper('.gallery-thumbs', {
            spaceBetween: 10,
            slidesPerView: 3,
            freeMode: true,
            watchSlidesVisibility: true,
            watchSlidesProgress: true,
          });
          var galleryTop = new Swiper('.gallery-top', {
            spaceBetween: 10,
            navigation: {
              nextEl: '.swiper-button-next',
              prevEl: '.swiper-button-prev',
            },
            thumbs: {
              swiper: galleryThumbs
            }
          });

css

.ss2 {
    background-size: cover;
    background-position: center;
  }

  .gallery-top {
    height: 70%;
    width: 60%;
  }

  .gallery-thumbs {
    height: 10%;
    width: 60%;
    box-sizing: border-box;
    padding: 10px 0;
  }

  .gallery-thumbs .swiper-slide {
    width: 20%;
    height: 100%;
    opacity: 0.4;
  }

  .gallery-thumbs .swiper-slide-thumb-active {
    opacity: 1;
  }

Answer 1

Могу предположить, что проблема в позиционировании html элементов. Как вы сказали, каждый раз, когда вы помещаете его в контейнер или около того, swiper отображается как встроенный, а не как блок. То, что я хотел бы попробовать, это дать родительский элемент swiper position: relative и также установить контейнер в положение position: relative. Это заставит дочерние элементы рассматривать его как основу для своих позиций, которые вы установили. Если это не решит вашу проблему, можете ли вы привести пример того, как код работает сейчас (например, через jsfiddle)