Cycle2 allows you to use any type of element for the slides, it's not solely for cycling images.
However, images are the default slide type so to use other elements you need to
override the slides
option as show on this page. The slides
option
can be set to any valid jQuery selector. The default value is > img
which is a selector to find all image elements that are immediate children of the slideshow
container.
Divs
These two examples demonstrates using plain old divs as slide elements.
<div class="cycle-slideshow"
data-cycle-fx="scrollHorz"
data-cycle-timeout="2000"
data-cycle-slides="> div"
>
<div style="background:#fcc">
<p>Lorem ipsum dolor ...
</div>
<div style="background:#cfc">
<p>Lorem ipsum dolor ...
</div>
<div style="background:#ccf">
<p>Lorem ipsum dolor ...
</div>
</div>
<div class="cycle-slideshow"
data-cycle-fx="fade"
data-cycle-timeout="2000"
data-cycle-slides="> div"
>
<div>
<p>Lorem ipsum dolor ...
</div>
<div>
<p>Mel eu pertinax ...
</div>
<div>
<p>Utinam electram pertinacia ...
</div>
</div>
Composites
Slides can be composed of many elements so don't feel constrained to just a single element for each slide. This example shows how to embed an overlay caption for each slide.
<div class="cycle-slideshow composite-example"
data-cycle-fx="scrollHorz"
data-cycle-slides="> div"
data-cycle-timeout="2000"
>
<div>
<img src="https://malsup.github.io/images/p1.jpg" width=100%>
<div class="cycle-overlay">Sonnenberg Gardens</div>
</div>
<div>
<img src="https://malsup.github.io/images/p2.jpg" width=100%>
<div class="cycle-overlay">The Redwoods</div>
</div>
<div>
<img src="https://malsup.github.io/images/p3.jpg" width=100%>
<div class="cycle-overlay">Andgel Island</div>
</div>
<div>
<img src="https://malsup.github.io/images/p4.jpg" width=100%>
<div class="cycle-overlay">Raquette Lake</div>
</div>
</div>
Anchors
This example shows how you can use anchors as slides to wrap images. View the source of this page to see the CSS styles applied.
<div class="cycle-slideshow"
data-cycle-fx="scrollHorz"
data-cycle-timeout="2000"
data-cycle-slides="> a"
>
<a href="https://malsup.github.io/images/p1.jpg">
<img src="https://malsup.github.io/images/p1.jpg" >
</a>
<a href="https://malsup.github.io/images/p2.jpg">
<img src="https://malsup.github.io/images/p2.jpg" >
</a>
<a href="https://malsup.github.io/images/p3.jpg">
<img src="https://malsup.github.io/images/p3.jpg" >
</a>
<a href="https://malsup.github.io/images/p4.jpg">
<img src="https://malsup.github.io/images/p4.jpg" >
</a>
</div>