Fully Responsive & Mobile-friendly jQuery Carousel Plugin - Owl Carousel 2

Fully Responsive & Mobile-friendly jQuery Carousel Plugin - Owl Carousel 2
File Size: 774 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

An upgraded version of jQuery OWL Carousel plugin. jQuery OWL Carousel 2 helps you create a highly customizable, fully responsive, mobile touch-friendly content carousel/slider with lots of useful functionalities for modern web/mobile designs.

More Features:

  • Content lazy loading.
  • Supports ajax content, videos, images, etc.
  • CSS3 aniamtions.
  • Auto height, auto width and autoplay.
  • Mousewheel, mouse drag and touch swipe to slide.
  • Custom animation types and speed.
  • Infinite loop like a carousel.
  • Callback events support.
  • Cross browser. Works on modern browsers and IE7+.

View more:

Basic usage:

1. Load the major CSS and the theme CSS in the head section of the page.

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

2. Load the jQuery javascript library and the jQuery OWL Carousel 2 script at the end of the page.

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

3. Create a simple carousel with the plain Html structure.

<div class="owl-carousel">

<div class="article"><h2>1</h2></div>
<div class="article"><h2>2</h2></div>
<div class="article"><h2>3</h2></div>
...

</div>

4. Call the plugin on the wrapper and setup the carousel via options.

$('.owl-carousel').owlCarousel({
items: 1,
loop: true,
margin: 10,
lazyLoad: true,
merge: true, 
video: true,
responsive:{	
480:{
items:2
},

678:{
items:3
},

960:{
items:5
}
}
});

4. Options and defaults.

// The number of items
items: 3,

// Infinite loop
loop: false,

// Center item
center: false,

// Go backwards when the boundary has reached.
rewind: false,

// Enable drag events.
mouseDrag: true,
touchDrag: true,
pullDrag: true,
freeDrag: false,

// margin-right(px) on item.
margin: 0,

// Padding left and right on stage (can see neighbours).
stagePadding: 0,

// Merge items.
merge: false,

// Fit merged items if screen is smaller than items value.
mergeFit: true,

// Set non grid content. 
autoWidth: false,

// Start position
startPosition: 0,

// false = ltr
rtl: false,

// Speed Calculate. 
smartSpeed: 250,

// Speed Calculate. 
fluidSpeed: false,

// Drag end speed.
dragEndSpeed: false,

// bject containing responsive options. 
// Can be set to false to remove responsive capabilities.
responsive: {},

// Responsive refresh rate.
responsiveRefreshRate: 200,

// Set on any DOM element. 
// If you care about non responsive browser (like ie8) then use it on main wrapper. 
// This will prevent from crazy resizing.
responsiveBaseElement: window,

// Easing for CSS2 $.animate.
fallbackEasing: 'swing',

// Callback to retrieve basic information (current item/pages/widths). 
// Info function second parameter is Owl DOM object reference.
info: false,

// Use it if owl items are deep nested inside some generated content. 
// E.g 'youritem'. Dont use dot before class name.
nestedItemSelector: false,

// Item seletors
itemElement: 'div',

// Stage selectors
stageElement: 'div',

// Default CSS classes
refreshClass: 'owl-refresh',
loadedClass: 'owl-loaded',
loadingClass: 'owl-loading',
rtlClass: 'owl-rtl',
responsiveClass: 'owl-responsive',
dragClass: 'owl-drag',
itemClass: 'owl-item',
stageClass: 'owl-stage',
stageOuterClass: 'owl-stage-outer',
grabClass: 'owl-grab'

Change logs:

v2.3.4 (2018-04-21)

v2.3.3 (2018-04-20)

  • Updated the regexp to recognize youtube-nocookie.com urls as youtube.
  • Fixes layout issues when combining lazyloading with autoheight

v2.3.2 (2018-03-17)

  • Address 1px autoheight issues

v2.3.1 (2018-02-24)

  • update

v2.2.1 (2017-03-01)

  • Removed unused tests, removed peerDependency, version bump for upcoming release

v2.2 (2016-10-26)

  • Refactors Core
  • Makes slideBy option independet of nav
  • Corrects update of navRewind
  • Corrects change event for position in carousel
  • Replaces indexOf with $.inArray in navigaiton plugin
  • Corrects to override in navigation plugin
  • Adds core overrides for navigation plugin
  • Corrects naming of plugins as object members
  • Corrects navText option of navigation plugin
  • Corrects slideBy option and adds events for navigation plugin
  • Corrects adaptive behaviour of the navigation plugin
  • fixed autoHeight plugin
  • fixed animate plugin
  • added autoHeight demo
  • fixed download link in subpages

v2 beta 3 (2016-04-12)

  • Update docs and small fixes
  • Fixes merge conflict. 
  • Adds parsing for addition styles of vimeo URLs.
  • Fixed Autoplay timer not reset when using nav dots
  • prevent half pixel blurry image

v2.4 (2014-06-10)

  • Update docs and small fixes

v2.3 (2014-06-02)

  • update

2014-05-15

  • update

 


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