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="/images/p1.jpg">
    <img src="/images/p2.jpg">
    <img src="/images/p3.jpg">
    <img src="/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>