Drag it.

Owl Carousel v2.0.0-beta.1.8

Please note that this is a beta version only for testing purposes. Enjoy!

1

2

3

4

6

7

8

9

10

11


//Javascript
$('.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
		}
	}
});

New features

  • Brand new code
  • Infinity Loop
  • Center item
  • Handle 1000's items on mobile devices
  • Smart Speed
  • Stage Padding
  • Item Margin
  • Ability to make almost all option responsive
  • Various Widths
  • Callback Events
  • YouTube/Vimeo support (fetching thumbnails as well)
  • Fixed click delegation issues
  • Anchors navigation
  • Merged Items
  • RTL
  • More to come...

To do

  • Clean the code
  • require.js support
  • Bower Support
  • Inprove CSS
  • Create new theme
  • Video Names

Demos:

Responsive options Center Lazy Load Merge Auto Width Videos Autoplay URL hash navigation Callbacks Info callback Right to left Manipulations Ajax Nested Item Selector AutoHeight Dot Thumbnails Lazy Content Structure Ajax + Lazy Content Zepto Support Animate Transitions

Installation:


<!-- Required Owl stylesheet -->
<link rel="stylesheet" href="owlcarousel/owl.carousel.css">

<!-- Optional Owl default theme stylesheet -->
<link rel="stylesheet" href="owlcarousel/owl.theme.css">

<!-- jQuery 1.7+  -->
<script src="jquery-1.11.0.min.js"></script>

<!-- Include js plugin -->
<script src="owlcarousel/owl.carousel.js"></script>

<!-- Set up your HTML -->
<!-- You don't need any special markup. All you need is to wrap your divs(owl works with any type element) inside the container element <div class="owl-carousel">. Class "owl-carousel" is mandatory to apply proper styles that come from owl.carousel.css file. -->
<div id="owl-example" class="owl-carousel">
  <div> Your Content </div>
  <div> Your Content </div>
  <div> Your Content </div>
  <div> Your Content </div>
  <div> Your Content </div>
  <div> Your Content </div>
  <div> Your Content </div>
  ...
</div>

<!-- Call the plugin -->
<script>
$(document).ready(function(){
  $("#owl-example").owlCarousel();
});
</script>

Options:

Option Name Default Type Description status
items 3 Int How many items you want to see on screen
loop false Boolean Inifnity loop
center false Boolean Center item.
mouseDrag true Boolean Mouse drag enabled
touchDrag true Boolean Touch drag enabled
pullDrag true Boolean Stage egde pull
freeDrag false Boolean Items edge pull
margin 0 Int margin-right(px) on item.
stagePadding 0 Int Padding left and right on stage (can see neighbours).
merge false Boolean Merge items. Looking for data-merge="{number}" inside item.
mergeFit true Boolean Fit merged items if screen is smaller than items value.
autoWidth false Boolean Set non grid content. Try using width style on divs. Needs test
startPosition 0 Int/string Start position or URL Hash string like '#id'
URLhashListener false Boolean Listen to url hash changes. data-hash on items is required.
nav false Boolean Show next/prev buttons
navRewind true Boolean Go to first/last
navText ['next','prev'] array HTML allowed.
slideBy 1 Int/String Navigation slide by x. 'page' string can be set slide by page
dots true Boolean Show dots navigation
dotsEach false Int/Boolean Show dots each x item
dotData false Boolean Used by data-dot content
lazyLoad false Boolean Lazy load images. data-src and data-src-retina for highres
lazyContent false Boolean Special Owl structure for heavy content carousel. Great for better mobile experience. There are some limitation but i strogly recommend this option for all heavy content mobile fallbacks.
autoplay false Boolean Autoplay
autoplayTimeout 5000 Int Autoplay interval timeout
autoplayHoverPause false Boolean Pause on mouse hover
smartSpeed 250 Int Speed Calculate. More info to come...
fluidSpeed false Int Speed Calculate. More info to come... To do
autoplaySpeed false Int/Boolean autoplay speed
navSpeed false Int/Boolean Navigation speed
dotsSpeed false Int/Boolean Pagination speed
dragEndSpeed false Int/Boolean Drag end speed
callbacks false Boolean Enable callback events
responsive empty object object/boolean Object containing responsive options. Can be set to false to remove responive capabilities
responsiveRefreshRate 200 Int Responsive refresh rate
responsiveBaseElement window DOM element 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.
responsiveClass false Boolean Optional helper class. Add 'owl-reponsive-' + 'breakpoint' class to main element. Can be used to stylize content on given breakpoint.
video false Boolean Enable fetching YouTube/Vimeo videos
videoHeight false Int/Boolean Set height for videos
videoWidth false Int/Boolean Set width for videos
animateOut false Bolean/String CSS3 animation out
animateIn false Bolean/String CSS3 animation in
mobileBoost false Boolean Boost performance on mobiles
fallbackEasing 'swing' string Ease for CSS2 $.animate
info false function The only one Owl function callback to retrieve basic information (current item/pages/widths). Info function second parameter is Owl DOM object reference.
nestedItemSelector false String/Class Use it if owl items are deep nasted inside some generated content. E.g 'youritem'. Dont use dot before class name.
itemElement 'div' String DOM element type for owl-item
stageElement 'div' String DOM element type for owl-stage
And many more options for class names 

Callback events:
//To use callbacks enable {callbacks:true}

'onInitBefore'
'onInitAfter'
'onResponsiveBefore'
'onResponsiveAfter'
'onTransitionStart'
'onTransitionEnd'
'onTouchStart'
'onTouchEnd'
'onChangeState'
'onLazyLoaded'
'onVideoPlay'
'onVideoStop'

Custom events:

'next.owl'
'prev.owl'
'goTo.owl'
'jumpTo.owl'
'addItem.owl'
'removeItem.owl'
'insertContent.owl'
'refresh.owl'
'autoHeight.owl'
'play.owl'
'stop.owl'
'stopVideo.owl'

Public methods:

.next(speed)
.prev(speed)
.goTo(position,speed)
.jumpTo(position)
.addItem(content,position)
.removeItem(position)
.insertContent(content)
.refresh()
.autoHeight()
.play(timeout,speed)
.stop()
.stopVideo()

Notes:

Owl Carousel 2 is not compatibile with previous iterations <2 but has many in common.
Testing on IE7/8/9/10, Latest Chrome, FF and Opera. Latest Android and iOS6/7.
Sorry for any typos in documentation. This is just an early demo and will try to fix everything in a time.