Basic jQuery Carousel Slider Plugin with CSS3 Transitions

Basic jQuery Carousel Slider Plugin with CSS3 Transitions
File Size: 675 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

A really simple and lightweight jQuery carousel plugin that provides the basic functionalities of a carousel slider like infinite loop scroll, arrows navigation, CSS3 based slide transitions, and more.

How to use it:

1. Include the required jquery.carousel.css file in the header.

<link href="stylesheets/jquery.carousel.css" rel="stylesheet" type="text/css">

2. Include the latest version of jQuery javascript library and jquery.carousel.js script in the footer.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
<script src="javascripts/jquery.carousel.js" type="text/javascript"></script> 

3. Create the html for an image carousel. 

<section class="demo">
<div class="carousel">
<div class="previews">
<div class="preview"> <img src="1.jpg"> </div>
<div class="preview"> <img src="2.jpg"> </div>
<div class="preview"> <img src="3.jpg"> </div>
</div>
<div class="controls"> <a class="next" data-action="next" href="#">›</a> <a class="prev" data-action="prev" href="#">‹</a> </div>
</div>
</section>

4. That's it. No JS call required.

Change logs:

2014-11-15

2014-07-02

  • fixing some bugs

This awesome jQuery plugin is developed by ksylvest. For more Advanced Usages, please check the demo page or visit the official website.