How to use multiple owl carousel on a single page.

We need to add multiple id in the single load script function.

	, initialize: function (options) {
				function loadScript(url, callback) {
					var script = document.createElement("script")
					script.type = "text/javascript";
					if (script.readyState) {
						script.onreadystatechange = function () {
							if (script.readyState === "loaded" || script.readyState === "complete") {
								script.onreadystatechange = null;
								callback();
							}
						};
					} else {
						script.onload = function () {
							callback();
						};
					}
					script.src = url;
					document.getElementsByTagName("head")[0].appendChild(script);
				}
				loadScript('https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js', function () {
					var owl = $("#owl_car");
					owl.owlCarousel({
						loop: true,
						nav: true,
						autoplay: true,
						autoplayTimeout: 5000,
						autoplaySpeed: 3000,
						navText: ["<i class='fa fa-angle-left'></i>", "<i class='fa fa-angle-right'></i>"],
						margin: 10,
						navContainer: '.bestsellers-section .custom-nav',
						responsiveClass: true,
						responsive: {
							0: {
								items: 1,
							},
							767: {
								items: 1,
							},
							1200: {
								items: 1,
							}
						}
					});
					$(".owl-next-icon").click(function () {
						owl.trigger('next.owl.carousel');
					})
					$(".owl-prev-icon").click(function () {
						owl.trigger('prev.owl.carousel', [300]);
					})
					{
						var owl2 = $(".owl-carousel");
						owl2.owlCarousel({
						margin: 20,
						nav: false,
						loop: true,
						margin: 10,
						responsive: 
						{
							0: {
								items: 1
							},
							480: {
								items: 2,
							},
							1200: {
								items: 2
							}
						}
						});
					}
				})

			}

Leave a comment

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