Owl Carousel
Dependency: Full jQuery not slim version, >= 1.8.3
- This Page
- Demos on Owl Carousel
- Docs
touchstartandtouchmovelisteners by default havepassive:trueinAddEventListenerOptionswhich means preventDefault can't be used and if so it will throw error[Intervention] Unable to preventDefault inside passive event listener due to target being treated as passive. Add.owl-carousel {touch-action:manipulation;}to prevent the error.
CSS class prefix owl-*
.owl-carousel.owl-theme .item.item imgby default is 100% width- Owl modifies the original HTML
- Layout is re-calculated when viewport is changed
- Add padding for all
.item:.owl-carousel.owl-theme.lili-ex .item {padding:...}
Loop Fixed height with Even Width, Navigation and Margin
#lili-ex-1 .item{ height: 10rem; }- If
.itemheight is greater, it will be cut off. If parent height is greater,.itemis placed at the top $('#lili-ex-1').owlCarousel({ loop:true, margin:10, nav:true, ... });- Width is equal based on number of
.item
1 .item.bg-success
2 .item
3 .item.p-5
6
7
8
9
10
11
12
Loop Center with Dynamic Height, Even Width and Margin
- Height is not fixed and it's set to the biggest calculated height of an item.
$('#lili-ex-2').owlCarousel({ center:true, ... });- Width is equal based on number of .item
1
2
3
6
7
8
9
10
11
12
No Loop Center with Dynamic Height, Even Width, Margin and max-width on one or all .item
- Height is not fixed and it's set to the biggest calculated height of an item.
- Take a look at item #3 (scroll to right)
.item img.d-block.mx-auto.lili-max-width
1
3
6
7
8
9
10
11
12
Loop Dynamic Width with Dynamic Height and Margin
- By default width is equal based on number of .item.
- This sets the .item width to auto
$('#lili-ex-4').owlCarousel({loop:true,autoWidth:true, margin:10, items:3 }); - However,
option:items:4,option:loop:truewon't have effect, the number of items depend on the wrapper's total width. - Height is not fixed and it's set to the biggest calculated height of an item.
1
2
3
6
7
8
9
10
11
12
Add Padding to both ends
- By default items are aligned like flex space-between.
- Add number of pixels at left and right ends
$('#lili-ex-5').owlCarousel({ stagePadding: 20, loop:true, margin:10, items:3 });
1
2
3
6
7
8
9
10
11
12
lazyLoad: true
- img.owl-lazy and img::data-src="url_to_img" or/and img::data-src-retina="url_to_highres_img".
- If you set above settings not on
but on other DOM element then Owl will load an image into css inline background style. Refer to Item #8
The image is loaded as background image
Some content here
Some content here
Some content here
Video
- video:true, lazyload:true, center:true, merge:true
- Need to CSS set .item-video height
- Or you can set video width or height as options
videoWidth: false, // Default false; Type: Boolean/NumbervideoHeight: false, // Default false; Type: Boolean/Number- Use data-merge="2" to adjust width for an item
- Apply .owl-video and href attribute on any tag other than
a. This tag will display:none