身高不是100%

Question

我正在使用 Swiper 创建带有缩略图的垂直幻灯片。缩略图效果很好，但是即使我没有指定高度，滑块的高度也很奇怪。我试过设置为 100%，但这不起作用。想法？

参见 CodePen：https://codepen.io/anon/pen/bYLxvo

var galleryTop = new Swiper('.gallery-top', {
  autoHeight: true,
  direction: 'vertical',
  nextButton: '.swiper-button-next',
  prevButton: '.swiper-button-prev',
  spaceBetween: 10,
  onSlideChangeEnd: function(swiper) {
    var activeIndex = swiper.activeIndex;
    $(galleryThumbs.slides).removeClass('is-selected');
    $(galleryThumbs.slides).eq(activeIndex).addClass('is-selected');
    galleryThumbs.slideTo(activeIndex, 255, false);
  }
});

var galleryThumbs = new Swiper('.gallery-thumbs', {
  spaceBetween: 10,
  freeMode: true,
  centeredSlides: false,
  slidesPerView: 'auto',
  direction: 'vertical',
  touchRatio: 0.2,
  onClick: function(swiper, event) {
    var clicked = swiper.clickedIndex
    swiper.activeIndex = clicked; //don't need this
    swiper.updateClasses() //don't need this
    $(swiper.slides).removeClass('is-selected');
    $(swiper.clickedSlide).addClass('is-selected');
    galleryTop.slideTo(clicked, 255, false);
  }
});

html,
body {
  position: relative;
}

.group:after {
  content: "";
  display: table;
  clear: both;
}

swiper {
  width: 600px;
  display: block !important;
  background: red !important;
}

.swiper-container {
  width: 100%;
}

.swiper-slide img {
  width: 100%;
}

.gallery-top .swiper-slide {
  display: inline-block;
}

.gallery-top {
  width: calc(100% - 120px);
  float: right;
  background: blue;
}

.gallery-thumbs {
  position: relative;
  height: 100% !important;
  width: 120px;
  float: left;
  display: table-cell;
  text-align: center;
  vertical-align: middle;
  background: green;
}

.gallery-thumbs .swiper-slide {
  width: 75px;
  height: 75px;
  border: 1px solid #fff;
  background-size: cover !important;
  display: inline-block;
  vertical-align: middle;
}

.gallery-thumbs .swiper-slide-active {
  border: 1px solid #ddd;
}

.gallery-thumbs .swiper-slide.is-selected {
  opacity: 1;
  border: 1px solid #ddd;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.2.6/js/swiper.min.js"></script>
<swiper class="group">
  <!-- Swiper -->
  <div class="swiper-container gallery-top">
    <div class="swiper-wrapper">
      <div class="swiper-slide">
        <img src="https://cdn.shopify.com/s/files/1/0978/6390/products/balancing-treatment.jpg?v=1508592020" />
      </div>
      <div class="swiper-slide">
        <img src="https://cdn.shopify.com/s/files/1/0978/6390/products/balancing.jpg?v=1508592020" />
      </div>
      <div class="swiper-slide">
        <img src="https://cdn.shopify.com/s/files/1/0978/6390/products/balancing-treatment-box.jpg?v=1508594651" />
      </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">
        <img src="https://cdn.shopify.com/s/files/1/0978/6390/products/balancing-treatment.jpg?v=1508592020" />
      </div>
      <div class="swiper-slide">
        <img src="https://cdn.shopify.com/s/files/1/0978/6390/products/balancing.jpg?v=1508592020" />
      </div>
      <div class="swiper-slide">
        <img src="https://cdn.shopify.com/s/files/1/0978/6390/products/balancing-treatment-box.jpg?v=1508594651" />
      </div>
    </div>
</swiper>

Answer 1

啊，好老的 100% 身高问题...

尝试将 100% 高度属性添加到您的 HTML 和 BODY。

html,
body {
    position: relative;
    height: 100%;
}

我一直面临的最大挑战就是围绕这个问题，但想想通向滑块的 DOM 树结构，并确保它们都展开到 100%。

看看你是怎么处理的。

身高不是100%

Height not 100%

javascript

css

jquery

swiper