Owl Carousel 2.0.0-beta.1.8



//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

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.

Drag it.

Owl Carousel v2.0.0-beta.1.8

1

2

3

4

6

7

8

9

10

11

New features

To do

Demos:

Installation:

Options:

Notes: