- Touch enabled jQuery plugin that lets you create a beautiful responsive carousel slider. Fully Customisable
- Over 60 options. Easy for novice users and even more powerful for advanced developers.
- Touch and Drag Support Designed specially to boost mobile browsing experience. Mouse drag works great on desktop too!
- Fully Responsive Almost all options are responsive and include very intuitive breakpoints settings.
- Modern Browsers Owl uses hardware acceleration with CSS3 Translate3d transitions. Its fast and works like a charm!
- Zombie Browsers CSS2 fallback supported for older browser Modules and Plugins Owl Carousel supports plugin modular structure. Therefore, you can detach plugins that you won’t use on your project or create new ones that fit your needs
Below Steps for how to do easly
Step 1 => Add below class on slider main div
owl-carousel
owl-theme
Step 2 => then put this class on slider item
item
Step 3 =>Then put this javascript library on php block under code block element
https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/owl.carousel.js
https://owlcarousel2.github.io/OwlCarousel2/assets/vendors/jquery.mousewheel.min.js
<link rel='stylesheet' id='owl_carousel-css-css' href='https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/assets/owl.carousel.min.css' media='all' />
<link rel='stylesheet' id='owl_theme_default-css-css' href='https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/assets/owl.theme.default.min.css' media='all' />
Step 4 => Then put this javascript code on javascript block under code block element
<script>
jQuery(document).ready(function($) {
var owl = $('.owl-carousel');
owl.owlCarousel({
center: true,
loop: true,
nav: true,
lazyLoad:true,
margin: 10,
autoplay:true,
autoplayTimeout:1000,
autoplayHoverPause:true,
responsive: {
0: {
items: 1
},
600: {
items: 2
},
960: {
items: 3
},
1200: {
items: 4
}
}
});
/*====This is for scroll ====*/
owl.on('mousewheel', '.owl-stage', function(e) {
if (e.deltaY > 0) {
owl.trigger('next.owl');
} else {
owl.trigger('prev.owl');
}
e.preventDefault();
});
})
</script>
Other demo available here https://owlcarousel2.github.io/OwlCarousel2/demos/demos.html