Slick Slider覆盖下面的元素

我光滑的滑块图像掩盖了应该位于下面的元素，我不知道为什么。我需要#features坐在#slideshow下面，但现在它被掩盖了。我不确定是什么使滑块与页面上它下面的元素重叠。我不想只想"推"；#featuresdiv与CSS一起使用，比如使用bottom: -50px或其他什么，因为我的目标是响应式设计。我需要幻灯片滑块和幻灯片占据与图像相同的高度。希望这有意义！这是我的代码：

HTML:

<div id="slideshow">
<div class="slide"><img src="images/Need Space.jpg"></div>
<div class="slide"><img src="images/Open Lot.jpg"></div>
<div class="slide"><img src="images/IMG_0713a.jpg"></div>
<div class="slide"><img src="images/IMG_0714a.jpg"></div>
</div>
<div id="features" class="flex">
<div>Safe</div>
<div>Secure</div>
<div>24-Hour Access</div>
</div>
<div id="description">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>

CSS：

/* SLIDESHOW */
#slideshow {
width: 100%;
height: 50vh;
margin-bottom: 5vh;
}
.slide {
width: 100%;
height: 100%;
}
.slide img {
width: 100%;
}
.slick-initialized .slick-track {
display: flex;
align-items: center;
}
/* FEATURES */
#features div {
margin: 5vw;
padding-bottom: .5vh;
font-weight: bolder;
font-size: 2.5vh;
letter-spacing: .25vw;
border-bottom: 1px solid white;
}

我发现了2个问题-

使用高度：50%而不是身高：50vh。(参考线-19(。这将解决你的问题
用父div包装所有幻灯片图片。将其命名为-class='slick'(参考行-53(。这个.slick类将迭代所有图片。如果你的滑块运行得很好，你就不必做这部分了

我已经附上了下面的代码-

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Tutorial</title>

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.min.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<style>
/* SLIDESHOW */
#slideshow {
width: 100%;
height: 50%;
margin-bottom: 5vh;
}
.slide {
width: 100%;
height: 100%;
}
.slide img {
width: 100%;
}
.slick-initialized .slick-track {
display: flex;
align-items: center;
}
/* FEATURES */

#features div {
margin: 5vw;
padding-bottom: .5vh;
font-weight: bolder;
font-size: 2.5vh;
letter-spacing: .25vw;
border-bottom: 1px solid white;

}
</style>
</head>
<body>

<div id="slideshow">
<div class="slick">
<div class="slide"><img src="https://dummyimage.com/vga"></div>
<div class="slide"><img src="https://dummyimage.com/vga"></div>
<div class="slide"><img src="https://dummyimage.com/vga"></div>
<div class="slide"><img src="https://dummyimage.com/vga"></div>
</div>
</div>
<div id="features" class="flex">
<div>Safe</div>
<div>Secure</div>
<div>24-Hour Access</div>
</div>
<div id="description">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script>
<script>
$(document).ready(() => {
$('#slideshow .slick').slick({
autoplay: true,
autoplaySpeed: 500, // autoplaySpeed: 1000, or             autoplaySpeed: 2000,
dots: true,
});
});
$(document).ready(() => {
$('#userReview .slick').slick({
autoplay: true,
autoplaySpeed: 8000,
dots: true,
});
});
</script>
</body>
</html>

相关内容

最新更新

热门标签：