All of the demos on this page, and nearly every demo on this site, require zero code. The slideshows are completely driven by markup. All that is needed is to include jQuery and the Cycle2 plugin using script tags like this:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> <script src="http://malsup.github.com/jquery.cycle2.js"></script>
Default Slideshow
The absolute simplest way to get started with Cycle2 is to use markup like this:
<div class="cycle-slideshow">
<img src="https://malsup.github.io/images/p1.jpg">
<img src="https://malsup.github.io/images/p2.jpg">
<img src="https://malsup.github.io/images/p3.jpg">
<img src="https://malsup.github.io/images/p4.jpg">
</div>
cycle-slideshow is a special classname which tells Cycle2 to
auto-initialize the slideshow when the page is loaded. The result is seen below:
Setting Options
Options are set using data-cycle-* attributes. The example below shows
the default fx, pause-on-hover, and speed options being
overridden.
<div class="cycle-slideshow"
data-cycle-fx="scrollHorz"
data-cycle-pause-on-hover="true"
data-cycle-speed="200"
>
<img src="http://malsup.github.io/images/p1.jpg">
<img src="http://malsup.github.io/images/p2.jpg">
<img src="http://malsup.github.io/images/p3.jpg">
<img src="http://malsup.github.io/images/p4.jpg">
</div>
Manual Slideshow
The following example shows how to have a manual slideshow by setting the timeout option
to zero. And it also shows how to bind prev and next controls. For more information
on prev/next controls, see the Prev/Next demo.
<div class="cycle-slideshow"
data-cycle-fx="scrollHorz"
data-cycle-timeout="0"
data-cycle-prev="#prev"
data-cycle-next="#next"
>
<img src="http://malsup.github.io/images/p1.jpg">
<img src="http://malsup.github.io/images/p2.jpg">
<img src="http://malsup.github.io/images/p3.jpg">
<img src="http://malsup.github.io/images/p4.jpg">
</div>
<div class="center">
<a href=# id="prev">Prev</a>
<a href=# id="next">Next</a>
</div>