Skip to content
Fetching contributors…
Cannot retrieve contributors at this time
56 lines (41 sloc) 2.54 KB
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Carousel using CSS3 Transitions - jCarousel Examples</title>
<!-- Shared assets -->
<link href='http://fonts.googleapis.com/css?family=Lato:400,400italic|Arvo:700,400,400italic' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="../_shared/css/style.css">
<!-- Example assets -->
<link rel="stylesheet" type="text/css" href="jcarousel.transitions.css">
<script type="text/javascript" src="../../libs/modernizr/modernizr.js"></script>
<script type="text/javascript" src="../../libs/jquery/jquery.js"></script>
<script type="text/javascript" src="../../dist/jquery.jcarousel.js"></script>
<script type="text/javascript" src="jcarousel.transitions.js"></script>
</head>
<body>
<div class="wrapper">
<h1>Carousel using CSS3 Transitions</h1>
<p>This example shows how to setup a carousel using CSS3 transitions for animations.</p>
<p>It uses a <a href="http://modernizr.com">Modernizr</a> feature detect to use transitions along with transforms to achieve full hardware acceleration when possible, falling back to jQuery-based animation otherwise.</p>
<div class="jcarousel-wrapper">
<div class="jcarousel">
<ul>
<li style="background: url('../_shared/img/img1.jpg');"></li>
<li style="background: url('../_shared/img/img2.jpg');"></li>
<li style="background: url('../_shared/img/img3.jpg');"></li>
<li style="background: url('../_shared/img/img4.jpg');"></li>
<li style="background: url('../_shared/img/img5.jpg');"></li>
<li style="background: url('../_shared/img/img6.jpg');"></li>
</ul>
</div>
<p class="photo-credits">
Photos by <a href="http://www.mw-fotografie.de">Marc Wiegelmann</a>
</p>
<a href="#" class="jcarousel-control-prev">&lsaquo;</a>
<a href="#" class="jcarousel-control-next">&rsaquo;</a>
</div>
<p>If you use this example on your site and don't have Modernizr already included, you can use this minimal <a href="http://modernizr.com/download/#-csstransforms-csstransforms3d-csstransitions-teststyles-testprop-testallprops-prefixes-domprefixes">build</a>.
</div>
</body>
</html>
Jump to Line
Something went wrong with that request. Please try again.