帶有文本的光滑滑塊輪播

Question

我使用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>

目前，該代碼只是將兩個 h2 放在第一個圖像上。

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

您可以在此處查看工作示例。