examples/transitions/index.html

<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Carousel using CSS3 Transitions - jCarousel Examples</title>

        <!-- Shared assets -->
        <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="../../vendor/modernizr/modernizr.js"></script>
        <script type="text/javascript" src="../../vendor/jquery/jquery.js"></script>
        <script type="text/javascript" src="../../dist/jquery.jcarousel.min.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>