Fully Responsive & Mobile-friendly jQuery Carousel Plugin - Owl Carousel 2
File Size: | 774 KB |
---|---|
Views Total: | 66100 |
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.
NOTE THAT THE PLUGIN IS NOW DEPRECATED. Check out our Carousel section for more Carousel plugins.
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.
// 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)
- Update
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.