Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Fetching contributors…

Cannot retrieve contributors at this time

81 lines (71 sloc) 3.923 kb
<!doctype html>
<html lang="en">
<head>
<title>jCarousel Test</title>
<!--
jQuery
-->
<script type="text/javascript" src="../../vendor/jquery-loader.js"></script>
<!--
jCarousel core
-->
<script type="text/javascript" src="../../src/core.js"></script>
<script type="text/javascript" src="../../src/core_plugin.js"></script>
<!--
jCarousel stylesheet
-->
<link rel="stylesheet" type="text/css" href="../horizontal.css">
<link rel="stylesheet" type="text/css" href="../vertical.css">
<script type="text/javascript">
$(function() {
$('#jcarousel1')
.jcarousel()
.find('[tabindex]')
.focus(function(e) {
e.preventDefault();
e.stopPropagation();
$(this).closest('.jcarousel').jcarousel('scroll', this);
});
});
</script>
</head>
<body>
<div class="jcarousel-skin-default">
<div class="jcarousel" id="jcarousel1">
<ul>
<li tabindex="1"><img src="http://static.flickr.com/66/199481236_dc98b5abb3_s.jpg" width="75" height="75" alt=""></li>
<li tabindex="2"><img src="http://static.flickr.com/75/199481072_b4a0d09597_s.jpg" width="75" height="75" alt=""></li>
<li tabindex="3"><img src="http://static.flickr.com/57/199481087_33ae73a8de_s.jpg" width="75" height="75" alt=""></li>
<li tabindex="4"><img src="http://static.flickr.com/77/199481108_4359e6b971_s.jpg" width="75" height="75" alt=""></li>
<li tabindex="5"><img src="http://static.flickr.com/58/199481143_3c148d9dd3_s.jpg" width="75" height="75" alt=""></li>
<li tabindex="6"><img src="http://static.flickr.com/72/199481203_ad4cdcf109_s.jpg" width="75" height="75" alt=""></li>
<li tabindex="7"><img src="http://static.flickr.com/58/199481218_264ce20da0_s.jpg" width="75" height="75" alt=""></li>
<li tabindex="8"><img src="http://static.flickr.com/69/199481255_fdfe885f87_s.jpg" width="75" height="75" alt=""></li>
<li tabindex="9"><img src="http://static.flickr.com/60/199480111_87d4cb3e38_s.jpg" width="75" height="75" alt=""></li>
<li tabindex="10"><img src="http://static.flickr.com/70/229228324_08223b70fa_s.jpg" width="75" height="75" alt=""></li>
</ul>
</div>
<a href="#" onclick="$('#jcarousel1').jcarousel('scroll', '-=1'); return false;">Prev (1)</a>
<a href="#" onclick="$('#jcarousel1').jcarousel('scroll', '+=1'); return false;">Next (1)</a>
|
<a href="#" onclick="$('#jcarousel1').jcarousel('scroll', '-=2'); return false;">Prev (2)</a>
<a href="#" onclick="$('#jcarousel1').jcarousel('scroll', '+=2'); return false;">Next (2)</a>
|
<a href="#" onclick="$('#jcarousel1').jcarousel('scroll', '-=5'); return false;">Prev (5)</a>
<a href="#" onclick="$('#jcarousel1').jcarousel('scroll', '+=5'); return false;">Next (5)</a>
|
<a href="#" onclick="$('#jcarousel1').jcarousel('scroll', '-=10'); return false;">Prev (10)</a>
<a href="#" onclick="$('#jcarousel1').jcarousel('scroll', '+=10'); return false;">Next (10)</a>
|
<a href="#" onclick="$('#jcarousel1').jcarousel('scroll', '-=20'); return false;">Prev (20)</a>
<a href="#" onclick="$('#jcarousel1').jcarousel('scroll', '+=20'); return false;">Next (20)</a>
</div>
<p>
<a href="#" onclick="$('html').attr('dir', 'rtl'); $('.jcarousel').jcarousel('reload'); return false;">RTL</a>
<a href="#" onclick="$('html').attr('dir', 'ltr'); $('.jcarousel').jcarousel('reload'); return false;">LTR</a>
|
<a href="#" onclick="$('.jcarousel').addClass('jcarousel-vertical').jcarousel('reload'); return false;">Vertical</a>
<a href="#" onclick="$('.jcarousel').removeClass('jcarousel-vertical').jcarousel('reload'); return false;">Horizontal</a>
</p>
</body>
</html>
Jump to Line
Something went wrong with that request. Please try again.