Question

138

Slick Slider Carousel with text

rated 0 times [ 144] [ 6] / answers: 1 / hits: 34161 / 7 Years ago, fri, may 12, 2017, 12:00:00

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.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

zahrafrancisr

Add To Favorites

Follow

Total Points: 176

Total Questions: 105

Total Answers: 99

Location: Svalbard and Jan Mayen

Member since Sun, Sep 25, 2022

2 Years ago

zahrafrancisr questions

1 Display a Swiper slider when clicking a thumbnail in a gallery

Fri, Mar 19, 21, 00:00, 3 Years ago

1 Confirming Password is still displaying Passwords do not match even when passwords do match

Mon, Dec 28, 20, 00:00, 3 Years ago

1 How to add regular expression to filter out the xhr URL in Cypress

Wed, Nov 11, 20, 00:00, 4 Years ago

1 What are some JS library alternatives for Animate On Scroll (aos)?

Mon, Aug 31, 20, 00:00, 4 Years ago

1 How to pass array of objects in angular app from one component to another component

Fri, Jul 17, 20, 00:00, 4 Years ago

View All

answered 7 Years ago alanisannettep · Accepted Answer

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.