Product Carousel

I found this: http://www.landmarkmlp.com/js-plugin/owl.carousel/ any of our avid developers out there or brick masters can help me figure out how to implement this? :slight_smile:

4 Likes

It would be great to be able to implement these types of merry-go-round and to combine them with a hero

You should use the newer, improved and maintained version however.
https://owlcarousel2.github.io/OwlCarousel2/

:wink: Update your link in your post.

4 Likes

Yes this would be nice alternative to Blocs Carousel. Last week i had a need for a OWl carousel for iPhone or Android screenshots. And we have used OWL with html embed.

The only problem is connecting the images. Because when you are exporting the page it doesn’t take the images from assets. Needs to be entered manually and stored in different folder.

Would love to see this as a brick. Would be nice improvement to default Carousel brick

Hey! Did you figure out how to implement this into blocs?

1 Like

Shouldn’t Blocs be able to do this?

I made up a quick example for @Stewie_Griffin just this morning using Owl2.

Its very easy to setup.

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

Yup, I’ve been using Owl for a long time, but I’ve never tried the bric version. I just wanted to point out that there is one already in the store. Looks tasty :yum:

1 Like

Just bought it and its far from tasty, can only be used for pictures and not products! Shame!

@Stewie_Griffin Can you explain what you mean by Products? Most carousels use images - do you want the carousel to do something else such as link to a product ordering page. Your clarification would help me understand better.

check here where it says “Hoteles de Playa” you will see the slider with products! I mean holidays deals!