Swiper делает блок div выше, чем задано

Question

Сделал ограничение на высоту swiper'a 50%, блок свайпера действительно стал меньше, но сама высота блока div осталась прежней. Как мне решить проблему с div? На скрине видна проблема, если я сделаю высоту .mySwiper2 80%, то все станет ок.

CSS стиль

.swiper {
    width: 100%;
    height: 20%;
}

.swiper-slide {
    text-align: center;
    font-size: 18px;
    background: #fff;

    /* Center slide text vertically */
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
}

.swiper-slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.swiper {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}

.swiper-slide {
    background-size: cover;
    background-position: center;
}

.mySwiper2 {
    height: 50%;
    width: 100%;
}

.mySwiper {
    height: 20%;
    box-sizing: border-box;
    padding: 10px 0;
    width: 100%;
}

.mySwiper .swiper-slide {
    width: 25%;
    height: 100%;
    opacity: 0.4;
}

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

.swiper-slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

html swiper блока

<div style="--swiper-navigation-color: #fff; --swiper-pagination-color: #fff" class="swiper mySwiper2">
    <div class="swiper-wrapper">
        {% for slide in self.slides %}
            <div class="swiper-slide popup-gallery ">
                {% for type, slide_ in slide.items %}
                    {% if type == 'image' %}
                        {% if slide_ %}
                            {% image slide.image original as tmp_photo %}
                            <a href="{{ tmp_photo.url }}" class="popup-gallery"><img src="{{ tmp_photo.url }}"></a>
                        {% endif %}
                    {% else %}
                        {% if slide_ %}
                            <a class="video" id="youtube-{{ slide_ }}"
                               href="https://www.youtube.com/watch?v={{ slide_ }}">
                                <img style="width: 100%" src="https://i.ytimg.com/vi/{{ slide_ }}/hq720.jpg">
                                <i class="fa fa-play-circle" aria-hidden="true"></i>
                            </a>
                        {% endif %}
                    {% endif %}
                {% endfor %}
            </div>
        {% endfor %}
    </div>
    <div class="swiper-button-next"></div>
    <div class="swiper-button-prev"></div>
</div>
<div class="swiper mySwiper">
    <div class="swiper-wrapper">
        {% for slide in self.slides %}
            <div class="swiper-slide">
                {% for type, slide_ in slide.items %}
                    {% if type == 'image' %}
                        {% if slide_ %}
                            {% image slide.image original as tmp_photo %}
                            <img src="{{ tmp_photo.url }}">
                        {% endif %}
                    {% else %}
                        {% if slide_ %}
                            <img style="width: 100%" src="https://i.ytimg.com/vi/{{ slide_ }}/hq720.jpg">
                            <i class="fa fa-play-circle" aria-hidden="true"></i>
                        {% endif %}
                    {% endif %}
                {% endfor %}
            </div>
        {% endfor %}
    </div>
</div>

var swiper = new Swiper(".mySwiper", {
  loop: true,
  spaceBetween: 10,
  slidesPerView: 4,
  freeMode: true,
  watchSlidesProgress: true,
});
var swiper2 = new Swiper(".mySwiper2", {
  loop: true,
  spaceBetween: 10,
  navigation: {
    nextEl: ".swiper-button-next",
    prevEl: ".swiper-button-prev",
  },
  thumbs: {
    swiper: swiper,
  },
});

.swiper {
  width: 100%;
  height: 20%;
}

.swiper-slide {
  text-align: center;
  font-size: 18px;
  background: #fff;
  /* Center slide text vertically */
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
}

.swiper-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.swiper {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}

.swiper-slide {
  background-size: cover;
  background-position: center;
}

.mySwiper2 {
  height: 50%;
  width: 100%;
}

.mySwiper {
  height: 20%;
  box-sizing: border-box;
  padding: 10px 0;
  width: 100%;
}

.mySwiper .swiper-slide {
  width: 25%;
  height: 100%;
  opacity: 0.4;
}

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

.swiper-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

<link href="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.js"></script>

<div class="container">
  <div style="--swiper-navigation-color: #fff; --swiper-pagination-color: #fff" class="swiper mySwiper2">
    <div class="swiper-wrapper">
      <div class="swiper-slide">
        <img style="width: 100%" src="https://i.ytimg.com/vi/XayyES2vO8Q/hq720.jpg">
      </div>
      <div class="swiper-slide">
        <img style="width: 100%" src="https://i.ytimg.com/vi/XayyES2vO8Q/hq720.jpg">
      </div>
      <div class="swiper-slide">
        <img style="width: 100%" src="https://i.ytimg.com/vi/XayyES2vO8Q/hq720.jpg">
      </div>
      <div class="swiper-slide">
        <img style="width: 100%" src="https://i.ytimg.com/vi/XayyES2vO8Q/hq720.jpg">
      </div>
      <div class="swiper-slide">
        <img style="width: 100%" src="https://i.ytimg.com/vi/XayyES2vO8Q/hq720.jpg">
      </div>
      <div class="swiper-slide">
        <img style="width: 100%" src="https://i.ytimg.com/vi/XayyES2vO8Q/hq720.jpg">
      </div>
    </div>
    <div class="swiper-button-next"></div>
    <div class="swiper-button-prev"></div>
  </div>
  <div class="swiper mySwiper">
    <div class="swiper-wrapper">
      <div class="swiper-slide">
        <img style="width: 100%" src="https://i.ytimg.com/vi/XayyES2vO8Q/hq720.jpg">
      </div>
      <div class="swiper-slide">
        <img style="width: 100%" src="https://i.ytimg.com/vi/XayyES2vO8Q/hq720.jpg">
      </div>
      <div class="swiper-slide">
        <img style="width: 100%" src="https://i.ytimg.com/vi/XayyES2vO8Q/hq720.jpg">
      </div>
      <div class="swiper-slide">
        <img style="width: 100%" src="https://i.ytimg.com/vi/XayyES2vO8Q/hq720.jpg">
      </div>
      <div class="swiper-slide">
        <img style="width: 100%" src="https://i.ytimg.com/vi/XayyES2vO8Q/hq720.jpg">
      </div>
    </div>
  </div>
</div>

Answer 1

Я не учел, что div в котором лежат div'ы с высотой в %, должен быть с высотой в px.

Обернул свайпер в div и задал следующие стили:

    .swiper-container {
    min-height: 500px;
    height: 1px;
    margin-top: 15px;
}

БЛОГ НА HUSL

Swiper делает блок div выше, чем задано

Ответы (1 шт):