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.)