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.jpgCode 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 = yesfx = 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.jpgCode 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 = yesfx = 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.)