带有文本的光滑滑块轮播

Posted 2023-05-07

【中文标题】带有文本的光滑滑块轮播

【英文标题】：Slick Slider Carousel with text

【发布时间】：2017-10-11 20:26:49

【问题描述】：

我使用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 放在第一张图像上。

【问题讨论】：

请添加你的css，也许问题就在那里

我有@randomguy04

好的，我想我知道你的问题是什么，但只是为了确定，你有任何关于 h2 父母的 css 吗？还有 top_slider 类的 css 是什么

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

好吧，看看下面的答案。

【参考方案1】：

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

只需添加一个具有这种样式的“幻灯片”类：

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

你可以看到working example here。

【讨论】：

太棒了！我把它放在 .slick-slide