• I love the SA sliders for our WordPress website, but would like to re-use the slider in the self programmed parts of our website. So I’m looking for a CSS class that will init the slider. If I’m not mistaken the plugin runs on Owl carrousel, so i’m looking for the ‘.owl-carousel’ equivalent from the example below (from the documentation of owl-caroussel).

    $(document).ready(function(){
    $(“.owl-carousel”).owlCarousel();
    });

    This way I wouldn’t have to load another slider JS file and keep my website nice and fast. Thanks a lot in advance!

    • This topic was modified 3 years, 5 months ago by casperweb.
Viewing 4 replies - 1 through 4 (of 4 total)
  • Plugin Author simonpedge

    (@simonpedge)

    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.

    Thread Starter casperweb

    (@casperweb)

    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.

    Plugin Author simonpedge

    (@simonpedge)

    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.

    Thread Starter casperweb

    (@casperweb)

    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!

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Is there any way to init the slider programmatically?’ is closed to new replies.