CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Miguel Moura
Miguel Moura

Reputation: 39384

Responsive slider with slide height updated

I have a list where each item contains a text and an image:

<div class="slider">
  <ul>
    <li>
      <div class="txt"><p>First slogan</p></div>
      <div class="img"><img src="http://placehold.it/800x180" /></div>      
    </li>
    <li> ... </li>
  </ul>
</div>

I need it to be responsive ... the img and txt divs scale on window resize.

After a certain point the img div becomes under the txt div as seen in codepen:

SLIDE EXAMPLE

This is working fine ... But now I need to make it work as a slider.

I am trying to make it using Cycle2 JQuery plugin:

SLIDE EXAMPLE WITH CYCLE 2

The height does not adapt to the slide content.

Could someone please help me out?

Thank you, Miguel

Upvotes: 0

Views: 251

Answers (1)

Amir5000
Amir5000

Reputation: 1728

If you take a look at their documentation here it has plenty of options to adapt the height like adding <div class="slider" data-cycle-auto-height="1:1">

Hope that helps.

Upvotes: 1

Related Questions