我正在使用here中的光滑轮播,并将其设置为垂直幻灯片,并使用jquery将高度部分设置为全屏显示。
任何人都知道我是否丢失了某些东西,当我滑动到第4张幻灯片和第5张幻灯片时,我可以在顶部看到以前的幻灯片背景颜色,而第1、2、3rd没有这个问题。
我不知道代码片段是否可以显示它,我在此处提供fiddle。谢谢。
initFullSlide();
function initFullSlide() {
var $fullSlide = $("#full-slide");
var $sections = $(".section");
$sections.css({ height: $(window).height() - 60 });
var slickIsChanging = false;
var slideIndex = 0;
var slideCount = $(".section").length;
function mouseWheel($slider) {
$fullSlide.on(
"mousewheel DOMMouseScroll wheel MozMousePixelScroll",
{
$slider: $slider
},
mouseWheelHandler
);
}
function mouseWheelHandler(event) {
// console.log("wheel");
event.preventDefault();
event.stopPropagation();
var $slideContainer = $(this);
if (!$slideContainer.hasClass("animating") && slickIsChanging == false) {
$slideContainer.addClass("animating");
var $slider = event.data.$slider;
var delta = event.originalEvent.deltaY;
if (delta > 0) {
$slider.slick("slickNext");
} else {
$slider.slick("slickPrev");
}
setTimeout(function() {
$slideContainer.removeClass("animating");
}, 1000);
}
}
$fullSlide
.on("init", function() {
//slick slider callback must be defined before creating slick object
// console.log("init");
mouseWheel($fullSlide);
})
.on("beforeChange", function(event, slick, currentSlide, nextSlide) {
//console.log("change start");
slickIsChanging = true;
})
.on("afterChange", function(event, slick, currentSlide) {
//console.log("change done");
slickIsChanging = false;
})
.slick({
prevArrow: false,
nextArrow: false,
slidesToShow: 1,
slidesToScroll: 1,
infinite: false,
vertical: true,
verticalSwiping: true,
draggable: true,
dots: false,
placeholders:false
// variableWidth:true,
});
}
body {
overflow: hidden;
}
#full-slide.slick-vertical .slick-slide {
border: none;
}
.slick-vertical .slick-slide {
border: none;
}
.slick-slide:nth-child(1) {
background-color: #1dcde4;
}
.slick-slide:nth-child(2) {
background-color: #d17205;
}
.slick-slide:nth-child(3) {
background-color: #1305d1;
}
.slick-slide:nth-child(4) {
background-color: #ced105;
}
.slick-slide:nth-child(5) {
background-color: #d10505;
}
.section {
width: 100%;
}
.section img {
width: 100%;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script>
<div id="full-slide">
<div class="section">
Text here
<img src="http://placehold.it/1190x334/d8d8d8/787878?text=img">
</div>
<div class="section">
Second text
<img src="http://placehold.it/1190x334/d8d8d8/787878?text=img2">
</div>
<div class="section">
<img src="http://placehold.it/1190x334/d8d8d8/787878?text=img3">
</div>
<div class="section">
<img src="http://placehold.it/1190x334/d8d8d8/787878?text=img4">
</div>
<div class="section">
<img src="http://placehold.it/1190x334/d8d8d8/787878?text=img5">
</div>
</div>
答案 0 :(得分:1)
使用font-size:0
来自@ user7290573的答案也可以,但是引用的文章说它在android中也可能有问题。
因此,我进一步研究了一些内容。实际上,这里codepen的示例运行得很好,但是它使用的是slick 1.7,而我使用的是最新的1.9。
我看到那些子div
结构在版本之间是不同的。因此添加.section{display:block !important;}
也可以。
我再读一遍为什么这些结构不同的原因,并通过在启动过程中添加 .slick({rows:0})
找到了解决方案。所以我现在正在使用它。 fiddle
答案 1 :(得分:0)
您需要将父容器的font-size
属性设置为0,因为您看到的间隙是由每个轮播元素之间的空格引起的。 Here's an updated JSFiddle。