Cycle2 jQuery plugin not nesting captions or next/prev controls

Question

After experimenting and trying Cycle2 plugin, I can't make it work to have the overlay caption and controls inside the main slide container, I copied and paste it just like in the demo website, any thoughts about this? Thanks in advance.

<!-- slider -->
<div class="row padded hide-on-mobile cycle-slideshow"
    data-cycle-fx="scrollHorz" 
    data-cycle-speed="1500"
    data-cycle-pause-on-hover="true"
    data-cycle-caption-overlay="caption2"
    data-cycle-caption-template="Slide {{slideNum}} of {{slideCount}} - ({title})"
    >

    <div class="cycle-overlay"></div>

    <img src="http://placehold.it/1200x450/fff&text=slide1" data-cycle-title="Spring" data-cycle-desc="desc1">
    <img src="http://placehold.it/1200x450/fff&text=slide2" data-cycle-title="Redwoods" data-cycle-desc="desc2">
</div><!-- end of slide container -->

Dylan Dylan · Accepted Answer · 2014-03-27T02:10:52

It can be a little confusing at first as the overlay and caption are different elements with their own options and can be displayed separately.

There's a few simple problems with your code. The first is data-cycle-caption-overlay="caption2" should be data-cycle-caption-plugin="caption2". However you don't actually need this option (and additional js plugin) unless you want to animate the caption.

As you are only using the cycle-overlay element within the slideshow you need to change the data-cycle-caption-template option to data-cycle-overlay-template.

Finally to display the overlay within your slideshow you'll need to add some styles.

Here's the updated html:

<div class="row padded hide-on-mobile cycle-slideshow"
    data-cycle-fx="scrollHorz" 
    data-cycle-speed="1500"
    data-cycle-pause-on-hover="true"
    data-cycle-overlay-template="Slide {{slideNum}} of {{slideCount}} - {{title}} ({{desc}})"
    >

    <div class="cycle-overlay"></div>

    <img src="http://placehold.it/480x320/555&text=slide1" data-cycle-title="Spring" data-cycle-desc="desc1">
    <img src="http://placehold.it/480x320/555&text=slide2" data-cycle-title="Redwoods" data-cycle-desc="desc2">
</div>

and css:

/* slideshow */
.cycle-slideshow {
    width: 480px;
    height: 320px;
    overflow: hidden;
}

/* overlay */
.cycle-overlay { 
    width: 100%;
    padding: 15px;
    position: absolute; 
    bottom: 0; 
    z-index: 600;
    background: rgba(0, 0, 0, 0.7); 
    color: white;  
    font-family: tahoma, arial;
}

and a working example on jsfiddle.

Cycle2 jQuery plugin not nesting captions or next/prev controls

1 Answers