EverWeb Codebox

Cycle2 Slider


Cycle 2 is a lot more sophisticated than its little brother and has a large number of options. This example is an autoplay slider with captions. The slideshow will pause on mouseover. Both the captions and slides can be hyperlinks.

Each slide is a div so it can have any type content such as image, text and image, video etc.

<div class="cycle-slideshow"

    data-cycle-fx="fadeout" /* Option are scrollHorz, fadeout and fade. Fadeout is a cleaner fade */

    data-cycle-timeout="3000" /* Slide durtation in milliseconds */

    data-cycle-speed="1000" /* Transition time in milliseconds */

    data-cycle-pause-on-hover="true" /* Pause on hover can be true or false */

    data-cycle-slides="> div">

    <div><a href="page-name.html" target="_blank"><img src="image1.jpg" alt=""></a></div>

    <div><img src="image2.jpg" alt=""><div class="cycle-overlay"><a href="tiny-cycle.html">Caption 2</a></div></div>

   <div> <img src="image3.jpg" alt=""><div class="cycle-overlay">Caption 3</div></div>


<!-- empty element for caption -->

<div id="alt-caption" class="center"></div>

This image is a hyperlink to Galleria opening in a new window
Hover to stop the slider.
Slideshow timing is easily adjusted
Transition can be horizontal scroll or fade
Each slide is in a div which can have any type of content


The options for the slider behavior use the data attribute and are commented above.

Each slide is a div...

<div> <img src="image.jpg" alt=""></div>

Add caption...

<div> <img src="image.jpg" alt=""><div class="cycle-overlay">Hover to stop the darned thing!</div></div>

Create an image as a hyperlink to open in a new window...

<div><a href="page-name.html" target="_blank"><img src="image.jpg" alt=""></a><div class="cycle-overlay">Hyperlink Text</div></div>

Remove target="_blank" if not required.

Create the caption as a hyperlink..

<div><img src="image.jpg" alt=""><div class="cycle-overlay"><a href="page-name.html">Hyperlink Text</a></div></div>


Paste the link to the stylesheet and the CSS shown below into the page Head Code box to overwrite the default styles.

<link rel="stylesheet" href=".. path to ../cycle2.css" type="text/css" />

<style type="text/css">

.cycle-slideshow {

    width: 700px; /* Set to image width */

    height: 300px;} /* Set to image height */

.cycle-overlay {

    font: 15px 'Verdana', Helvetica, sans-serif; /* Caption font size and type */

    text-align: center; /* align caption left, right or center */

    color: #fff; /* Caption text color */

    padding: 5px 15px; /* Padding. 5px is the top/bottom to adjust caption div height. 15px is the left/right padding */

    background: #0000000; /* Caption background color */  

    opacity: .5; /* Caption opacity from 0. to 1 */




Add links to jQuery and the cycle2.min.js files in the page Footer Code box...

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<script type="text/javascript" src=".. path to ../jquery.cycle2.min.js"></script>