Product Carousel

I Need Help
9

Owl2 is very flexible and responsive, you can set options for your own break points very easily.

Using a code block…

Place in the header

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css">

Place in footer

<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>

You need these to run after the above

<script>
$(document).ready(function(){
  $(".owl-carousel").owlCarousel();
});

<!-- This is where you can customise the carousel and the responsive breakpoint settings -->
$('.owl-carousel').owlCarousel({
    loop:true,
    margin:10,
    responsiveClass:true,
    responsive:{
        0:{
            items:1,
            nav:false,
            loop:true
        },
        600:{
            items:3,
            nav:false,
            loop:true,
        },
        1000:{
            items:5,
            nav:false,
            loop:true,
        }
    }
})
</script>

Then the HTML code for the actual carousel

<div class="owl-carousel">
  <div> Your Item</div>
  <div> Your Item</div>
  <div> Your Item</div>
  <div> Your Item</div>
</div>

By the way, even though you can custom code Owl2, I have also bought the Owl2 bloc as posted above by @Whittfield, because sometimes thats just even easier :wink: depends on the project.

2 Likes