如何解决Slick Slider 覆盖了下面的元素
我光滑的滑块图像覆盖了应该位于下方的元素,我不知道为什么。我需要 #features
坐在 #slideshow
下方,但现在它被掩盖了。我不确定是什么让滑块与页面上它下面的元素重叠。我不想只想用 CSS 将 #features
div 向下“推”,比如使用 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 个问题 -
- 不要使用 height: 50vh,而是使用 height: 50%。 (参考线 - 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,});
});
</script>
</body>
</html>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。