Using the Script Component to Customize The Owl Carousel Using the Script Component to Customize The Owl Carousel

Using the Script Component to Customize The Owl Carousel

Before you begin, please reference our best practices regarding

Javascript for Sell Theme

Javascript for Default & Minimal Theme

JuniperWeb leverages the Owl Carousel, which is a touch enabled jQuery plugin that lets you create a beautiful responsive carousel slider. You can customize the Owl Carousel in a low code way with small scripts.

Please note, you are limited to customize ALL Owl Carousels on a page. We currently cannot pick and choose.
Here is a example of code the will loop all Owl Carousels on the page every 2 seconds

<script>
document.addEventListener("DOMContentLoaded", function(){

var owl = $('.owl-carousel');

owl.owlCarousel({
items:1,
loop:true,
autoplay:true,
autoplayTimeout:2000,
});

});
</script>

How To Insert your Owl Carousel Code on your JuniperWeb Page

1. While page building in JuniperWeb, place one Script Component at the bottom of your page.

mceclip1.png

2. Replace all Source Code with the sample code above, or create your own snippet. Use these demos to gain some inspiration and get a jumpstart on your code snippet: https://owlcarousel2.github.io/OwlCarousel2/demos/demos.html

mceclip0.png

3. Save and Publish the page. Visit YourDomainName.com/clear to see changes

Need further support? Submit a request