Horizontal Scrolling

Horizontal scrolling
effect (basic)

jquery.cycle2.js 46.4 KB (47,564 bytes)
jquery.min.js 90.4 KB (92,629 bytes)
raznye.html (IE9: Save target as... saves it only as .htm, so add L for accuracy!)
01.jpg
02.jpg
03.jpg
04.jpg

Code for the HTML file:

<html>

<head>
<script src="jquery.min.js"></script>
<script src="jquery.cycle2.js"></script>
</head>

<body>

<table align="center" cellpadding="0" cellspacing="0">
<tr>
<td>

<div class="cycle-slideshow" data-cycle-loop="1"
data-cycle-fx="scrollHorz"
data-cycle-pause-on-hover="true"
data-cycle-speed="300">
<img src="01.jpg">
<img src="02.jpg">
<img src="03.jpg">
<img src="04.jpg">
</div>

</td>
</tr>
</table>

</body>

The data-cycle-loop="1" attribute means not to keep showing the pictures from the beginning.
The data-cycle-loop="0" attribute — or if it's omitted entirely — means, that it should loop again
from the beginning.

1 = no
0 = yes

fx = effects
scrollHorz = scrolling horizontally
pause on hover = upon mouseover it stops, no Paused button displayed
speed = time between slides (300 = 3 seconds, etc.)

Horizontal scrolling
effect (Paused button)

jquery.cycle2.js 46.4 KB (47,564 bytes)
jquery.min.js 90.4 KB (92,629 bytes)
raznye-pausedbutton.html (IE9: Save target as... saves it only as .htm, so add L for accuracy!)
01.jpg
02.jpg
03.jpg
04.jpg

Code for the HTML file:

<!doctype html>

<head>

<style>
.cycle-paused:after {
content: 'Paused'; color: white; background: black; padding: 10px;
z-index: 500; position: absolute; top: 10px; right: 10px;
border-radius: 10px; opacity: .5; filter: alpha(opacity=50);
}
</style>

<script src="jquery.min.js"></script>
<script src="jquery.cycle2.js"></script>
</head>

<body>

<table align="center" cellpadding="0" cellspacing="0">
<tr>
<td>

<div class="cycle-slideshow" data-cycle-loop="1"
data-cycle-fx="scrollHorz"
data-cycle-pause-on-hover="true"
data-cycle-speed="300">
<img src="01.jpg">
<img src="02.jpg">
<img src="03.jpg">
<img src="04.jpg">
</div>

</td>
</tr>
</table>

</body>

The data-cycle-loop="1" attribute means not to keep showing the pictures from the beginning.
The data-cycle-loop="0" attribute — or if it's omitted entirely — means, that it should loop again
from the beginning.

1 = no
0 = yes

fx = effects
scrollHorz = scrolling horizontally
pause on hover = upon mouseover it stops & a Paused button is displayed (in top right corner)
speed = time between slides (300 = 3 seconds, etc.)