Slick滑块轮播与文本

Question

Slick滑块轮播与文本

5

我使用Slick Slider创建了一个简单的带箭头的图像轮播。但是，我希望每个滑过的图片上方显示不同的h2，就像this网站一样。

$(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>

目前这段代码只是将两个h2标签叠放在第一张图片上。

- RhysE96

请添加您的CSS，也许问题就在那里。 - Carlos Valencia

我有@randomguy04 - RhysE96

好的，我想我知道你的问题在哪里，但为了确保起见，您的h2父元素上有任何CSS吗？另外，类top_slider的CSS是什么？ - Carlos Valencia

我已经在 .slick-slide img 上将高度和宽度设置为100%。就这样。 - RhysE96

好的，请查看下面的答案。 - Carlos Valencia

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Carlos Valencia · Accepted Answer

您遇到的问题是由于您的CSS导致的，您正在为h2标签设置绝对位置，但您没有设置它们的父元素相对位置。

只需添加一个带有以下样式的类"slide":

.slide {
  position: relative;
}

然后将该类分配给所有幻灯片，如下所示：

<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>

你可以在这里看到一个实际的示例。