How to create owl Carousel with mouse wheel under 5 mins in Oxygen Page builder

  • 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

Related Post

Leave a Reply

Your email address will not be published. Required fields are marked *