Slick Slider Carousel with text

Question

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

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

Pallium

please add your css as well, maybe the issue is there – Troopship

I have @randomguy04 – Pallium

okay, i think i know what your problem is, but just to make sure, do you have any css on the h2 parents? also what's the css for the class top_slider – Troopship

I have set height and width to 100% on .slick-slide img {. That's it – Pallium

alright, check the answer below. – Troopship

Answer 1

The Issue you are having is due to your CSS, you are setting an absolute position for the h2 tags, but you are not setting their parents to have a relative position.

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.

Troopship

Awesome! I put it on .slick-slide { – Pallium