我正在使用 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>啊，好古老的 100% 身高问题……
尝试将 100% 高度属性添加到您的HTML和BODY。
html,
body {
position: relative;
height: 100%;
}
我一直面临的最大挑战是围绕着这个，但想想通向你的滑块的 DOM 树结构，并确保它们都扩展到 100%。
看看你是怎么做的。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句