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

Fully Responsive & Mobile-friendly jQuery Carousel Plugin - Owl Carousel 2
File Size: 722 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+.

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.

items:              3,
loop:               false,
center:             false,

mouseDrag:          true,
touchDrag:          true,
pullDrag:           true,
freeDrag:           false,

margin:             0,
stagePadding:       0,

merge:              false,
mergeFit:           true,
autoWidth:          false,
autoHeight:         false,

startPosition:      0,
URLhashListener:    false,

nav:                false,
navRewind:          true,
navText:            ['prev','next'],
slideBy:            1,
dots:               true,
dotsEach:           false,
dotData:            false,

lazyLoad:           false,
lazyContent:        false,

autoplay:           false,
autoplayTimeout:    5000,
autoplayHoverPause: false,

smartSpeed:         250,
fluidSpeed:         false,
autoplaySpeed:      false,
navSpeed:           false,
dotsSpeed:          false,
dragEndSpeed:       false,

responsive:         {},
responsiveRefreshRate : 200,
responsiveBaseElement: window,
responsiveClass:    false,

video:              false,
videoHeight:        false,
videoWidth:         false,

animateOut:         false,
animateIn:          false,

fallbackEasing:     'swing',

callbacks:          true,
info:               false,

nestedItemSelector: false,
itemElement:        'div',
stageElement:       'div',

navContainer:       false,
dotsContainer:      false,

//Classes and Names
themeClass:         'owl-theme',
baseClass:          'owl-carousel',
itemClass:          'owl-item',
centerClass:        'center',
activeClass:        'active',
navContainerClass:  'owl-nav',
navClass:           ['owl-prev','owl-next'],
controlsClass:      'owl-controls',
dotClass:           'owl-dot',
dotsClass:          'owl-dots',
autoHeightClass:    'owl-height'

Change logs:

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.