Manual Controls


Simple Prev/Next
manual controls

  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:

<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-fx="scrollHorz"
data-cycle-timeout="0"
data-cycle-prev="#prev"
data-cycle-next="#next">
<img src="01.jpg">
<img src="02.jpg">
<img src="03.jpg">
<img src="04.jpg">
</div>

<center>
<a href="#" id="prev">Prev</a>
&nbsp; &nbsp; &nbsp;
<a href="#" id="next">Next</a>
</center>

</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. In this example it doesn't work, even if you set it to 1, so we omitted it.

  1 = no
  0 = yes