Javascript 带有文本的光滑滑块轮播
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/43939059/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Slick Slider Carousel with text
提问by RhysE96
I've created a simple image carousel with arrows using Slick Slider. But I want a different h2 to be shown on top each image that slides across, like on thiswebsite.
我使用Slick Slider创建了一个带有箭头的简单图像轮播。但是我希望在每个滑动的图像顶部显示不同的 h2，就像在这个网站上一样。
$(document).ready(function() {
$('.top_slider').slick({
dots: false,
infinite: true,
// centerMode: true,
slidesToShow: 1,
slidesToScroll: 1,
// centerPadding: '220px',
arrows: true,
prevArrow: '<button type="button" data-role="none" class="slick-prev slick-arrow" aria-label="Previous" role="button" style="display: block;">Previous</button>',
nextArrow: '<button type="button" data-role="none" class="slick-next slick-arrow" aria-label="Next" role="button" style="display: block;">Next</button>'
});
});h2 {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
color: white;
font-size: 46px;
-webkit-transition: all 300ms ease;
transition: all 300ms ease;
text-transform: uppercase;
}<section class="top_slider">
<div>
<img src="images/image1.jpg">
<h2>text 1</h2>
</div>
<div>
<img src="images/image2.jpg">
<h2>text 2</h2>
</div>
<div>
<img src="images/image3.jpg">
<h2>text 3</h2>
</div>
</section>At the moment that code just puts both h2's on top of each other on the first image.
目前，该代码只是将两个 h2 放在第一个图像上。
回答by randomguy04
The Issue you are having is due to your CSS, you are setting an absolute position for the h2tags, but you are not setting their parents to have a relative position.
您遇到的问题是由于您的 CSS，您为h2标签设置了绝对位置，但没有将其父项设置为具有相对位置。
simply add a class "slide" with this style:
只需添加一个具有这种样式的类“幻灯片”：
.slide {
position: relative;
}
and assign that class to all your slides like this:
并将该类分配给您的所有幻灯片，如下所示：
<div class="slide">
<img src="https://unsplash.it/400/250">
<h2>text 1</h2>
</div>
<div class="slide">
<img src="http://placehold.it/400x250">
<h2>text 2</h2>
</div>
You can see a working example here.
