A simple, slick and responsive javascript carousel. The concept is to just use classes and data attributes to initialize the carousel and use it without writing any javascript code. It is very simple and easy to setup and use it.
Bower: bower install FlickCarousel --save
CSS file to include in your HTML document
<link type="text/css" rel="stylesheet" href="../dist/css/flick-carousel.min.css" />
Javascript files to include in your HTML document
<script type="text/javascript" src="../bower_components/jquery/dist/jquery.min.js"></script>
<script type="text/javascript" src="../bower_components/jquery-ui/jquery-ui.min.js"></script>
<script type="text/javascript" src="../dist/js/flick-carousel.min.js"></script>
HTML structure to setup the carousel
<div class="flick-carousel flick-carousel-single" data-horizontal="true" data-auto="true" data-easing="easeOutExpo">
<div class="flick-content">
<div class="flick-item" style="background-image: url('images/img1.jpg');"></div>
<div class="flick-item" style="background-image: url('images/img2.jpg');"></div>
<div class="flick-item" style="background-image: url('images/img3.jpg');"></div>
</div>
<button class="flick-prev" type="button"></button>
<button class="flick-next" type="button"></button>
<div class="flick-bullets"></div>
</div>
HTML data attributes to set carousel options
data-horizontal="true" // Switch to horizontal or vertical mode.
data-auto="true" // Start the carousel automatically.
data-easing="easeOutExpo" // Easing for duration based (tweening) animations. Can be: 'swing', 'easeOutExpo', etc. For more easing options visit http://api.jqueryui.com/easings
data-cycle-by="items" // Enable automatic cycling by 'items' or 'pages'.
data-cycle-interval="4000" // Delay between cycles in milliseconds.
data-speed="1000" // Animations speed in milliseconds. 0 to disable animations.
data-controls-outside="true" // Enable controls outside carousel container.
To view some examples run test/index.html
FlickCarousel is released under the MIT license. Have at it.
Made by Ammaar Latif