Powerful and Customizable jQuery Carousel Slider - OWL Carousel

OWL Carousel is a clean and neat jQuery slider plugin for creating fully responsive and touch-enabled carousel slider with a lot of options.

Try out OWL Carousel 2.

Features:

• Fully responsive and configurable
• CSS3 3D Acceleration
• Multiple instances on one page
• Lightweight and easy to implement
• Supports all the modern browsers
• Touch & Mobile friendly
• Dots navigation and prev/next buttons

More examples:

• One Item with Image
• Custom Width
• Full Browser Width
• Content with Images

How to use it:

1. Include jQuery OWL Carousel CSS on the page

<link href="owl.carousel.css" rel="stylesheet">
<link href="owl.theme.css" rel="stylesheet">

2. Create a container with images

<div id="owl-demo" class="owl-carousel owl-theme">
 
  <div class="item"><img src="assets/fullimage1.jpg" alt="The Last of us"></div>
  <div class="item"><img src="assets/fullimage2.jpg" alt="GTA V"></div>
  <div class="item"><img src="assets/fullimage3.jpg" alt="Mirror Edge"></div>
 
</div>

3. Include jQuery library and jQuery OWL Carousel Plugin on the web page

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="owl-carousel/owl.carousel.js"></script> 

4. Call the plugin with options

$(document).ready(function() {
 
$("#owl-demo").owlCarousel({
 
navigation : true, // Show next and prev buttons
 
slideSpeed : 300,
paginationSpeed : 400,
 
items : 1, 
itemsDesktop : false,
itemsDesktopSmall : false,
itemsTablet: false,
itemsMobile : false
 
});
 
});

5. All the options

slideSpeed: 200,	//Slide speed in milliseconds
paginationSpeed: false,	//Pagination speed in milliseconds
autoPlay: false,        //Auto play per slide. Change to any integrer for example "paginationSpeed : 8000" to play every 8 seconds
goToFirst: true,	//Slide to first item if autoPlay reach end
goToFirstSpeed:1000,	//Slide speed of goToFirst option in milliseconds
navigation: false	//Display "next" and "prev" buttons. Fully customizable. Note that for better control over navigation the div with arrows and pagination is outside your carousel wrapper
navigationText: ["prev","next"], //You can cusomize your own text for navigation. To get empty buttons use false : "navigationText : false"
pagination: true	//Show pagination.
paginationNumbers: false,	//Show numbers inside pagination buttons
responsive: true,	//You can use Owl Carousel on desktop-only websites too! Just change that to "false" to disable resposive capabilities
items:5,	//This variable allows you to set the maximum amount of items displayed at a time with the widest browser width
itemsDesktop:[1199,4],	//This allows you to preset the number of slides visible with a particular browser width. The format is [x,y] whereby x=browser width and y=number of slides displayed. For example [1199,4] means that if(window<=1199){ show 4 slides per page} Alternatively use "itemsDesktop: false" to override these settings.To fully understand how it works check my Custom Demo
itemsDesktopSmall:[979,3],	//As above.
itemsTablet:[768,2],	//As above.
itemsMobile:[479,1],	//As above

Change log:

v1.3.2 (2014-05-13)

• Fixed $.data issue. ( This resolved jQuery1.7.1 issues )
• Added minified version by Google Closure compiler.

v1.3.1 (2013-11-25)

• Fixed startDrag event
• Included awesome itemsCustom function.
• Fixed sync demo

---

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