EverWeb Codebox

Tiny Cycle Slider

Lightweight Version of Cycle2 Slider

If you want a basic website fixed timing banner with slide or fade transition then this is the one. The plugin is really lightweight and the code so simple that (just about) everyone is going to manage this project.

This little slider uses data attributes rather than javascript for the variables.

The data-fx is for the transition type with the choice of fade or scroll.

The data-speed is expressed in milliseconds and is the time taken for transtions to complete.

The data-timeout is the number of ms between transitions which translates as the amount of time each slide is displayed.

image 1image 2image 3image 4image 5

HTML

<div class="tcycle" data-fx="scroll" data-speed="1000" data-timeout="3000">

    <img src="..path to../img/1.jpg" alt="image 1" />

    <img src="..path to../img/2.jpg" alt="image 2" />

    <img src="..path to../img/3.jpg" alt="image 3" />

    <img src="..path to../img/4.jpg" alt="image 4" />

</div>

The desired width and height are entered into the CSS which is pasted into the page Head Code box...

CSS

<style type="text/css">

.tcycle { width:640px;height:480px; margin:0;padding:0 }

img { width: 100%;}

</style>

Javascript

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

<script src="jquery.tcycle.js" type="text/javascript"></script>

Find out more at the Developer's website.