If you have multiple sliders on the page, then the Owl Carousel JS file will only load once. See:
https://edgewebpages.com/
There are 3 sliders on this page, but if you view source for this page and search for “owl.carousel.min.js” then you will see that this only exists once in the source code.
Hi Simon, Thanks for your reply, but I’m afraid you’re missing my point. It’s not that I want multiple sliders on one page, but I want to combine sliders which are build within the plugin (as they should normally be) and sliders which are build programmatically (so added by coding in the HTML/JS).
I would like to re-use the already included JS from the plugin for my coded sliders. So I’m looking for the JS that is initializing the sliders. This is usually done by adding an init function to a CSS class, and when I would place this class in my code, the slider should than be automatically created with the content I placed inside the container (DIV) that holds this class.
As far as I’m aware, each owl carousel slider needs to initialised uniquely with jQuery code, and this cannot be done via a class to initialize multiple sliders with a single piece of JS code. So the JS to initialise a single SA slide may look like:
jQuery('#slider_image_demo').owlCarousel({
responsive:{
0:{ items:1 },
480:{ items:2 },
768:{ items:2 },
980:{ items:3 },
1200:{ items:3 },
1500:{ items:4 }
},
autoplay : true,
autoplayTimeout : 3000,
autoplayHoverPause : true,
smartSpeed : 300,
fluidSpeed : 300,
autoplaySpeed : 300,
navSpeed : 300,
dotsSpeed : 300,
loop : true,
nav : true,
navText : ['Previous','Next'],
dots : false,
responsiveRefreshRate : 200,
slideBy : 1,
mergeFit : true,
autoHeight : false,
mouseDrag : false,
touchDrag : true
});
As you can se this targets a CSS ID to initialise the slider. I don’t think I’ve seen example where a single “owlCarousel” initialise statement (live above) initialises multiple sliders.
Ah I see, that’s too bad. But I might be able to place a dummy slider in the plugin than, and try to activate the slider with the provided ID. Might not be the cleanest solution, but I will give it a try anyway. Thanks for looking into this!
