Slick Slider Carousel with text

javascript jquery css carousel slick.js

31,559

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.

31,559

Author by

RhysE96

Updated on March 04, 2020

Comments

RhysE96 about 4 years

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.

randomguy04 almost 7 years

please add your css as well, maybe the issue is there
RhysE96 almost 7 years

I have @randomguy04
randomguy04 almost 7 years

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
RhysE96 almost 7 years

I have set height and width to 100% on .slick-slide img {. That's it
randomguy04 almost 7 years

alright, check the answer below.