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

99 lines (87 sloc) 4.542 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 plugins
-->
<script type="text/javascript" src="../../src/autoscroll.js"></script>
<script type="text/javascript" src="../../src/control.js"></script>
<script type="text/javascript" src="../../src/pagination.js"></script>
<!--
jCarousel skin 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({
wrap: 'circular'
})
.jcarouselAutoscroll({
target: '+=1'
});
$('.jcarousel-prev').jcarouselControl({target: '-=1'});
$('.jcarousel-next').jcarouselControl({target: '+=1'});
$('#jcarousel-pagination1').jcarouselPagination();
$('#jcarousel-pagination2').jcarouselPagination({
perPage: 1
});
});
</script>
</head>
<body>
<div class="jcarousel-skin-default">
<div class="jcarousel" id="jcarousel1">
<ul>
<li><a href=""><img src="http://static.flickr.com/66/199481236_dc98b5abb3_s.jpg" width="75" height="75" alt=""></a></li>
<li><a href=""><img src="http://static.flickr.com/75/199481072_b4a0d09597_s.jpg" width="75" height="75" alt=""></a></li>
<li><a href=""><img src="http://static.flickr.com/57/199481087_33ae73a8de_s.jpg" width="75" height="75" alt=""></a></li>
<li><a href=""><img src="http://static.flickr.com/77/199481108_4359e6b971_s.jpg" width="75" height="75" alt=""></a></li>
<li><a href=""><img src="http://static.flickr.com/58/199481143_3c148d9dd3_s.jpg" width="75" height="75" alt=""></a></li>
<li><a href=""><img src="http://static.flickr.com/72/199481203_ad4cdcf109_s.jpg" width="75" height="75" alt=""></a></li>
<li><a href=""><img src="http://static.flickr.com/58/199481218_264ce20da0_s.jpg" width="75" height="75" alt=""></a></li>
<li><a href=""><img src="http://static.flickr.com/69/199481255_fdfe885f87_s.jpg" width="75" height="75" alt=""></a></li>
<li><a href=""><img src="http://static.flickr.com/60/199480111_87d4cb3e38_s.jpg" width="75" height="75" alt=""></a></li>
<li><a href=""><img src="http://static.flickr.com/70/229228324_08223b70fa_s.jpg" width="75" height="75" alt=""></a></li>
</ul>
</div>
<div id="jcarousel-pagination1"></div>
<div id="jcarousel-pagination2"></div>
<a href="#" class="jcarousel-prev">Prev</a>
<a href="#" class="jcarousel-next">Next</a>
|
<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.