Product Carousel

I Need Help
3

You should use the newer, improved and maintained version however.

:wink: Update your link in your post.

4 Likes
4

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

5

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

6

https://blocs.store/product/owl-carousel/

1 Like
7

Shouldn’t Blocs be able to do this?

8

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

Its very easy to setup.

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
10

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
11

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

12

@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.

13

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

14

Hш Malachiman! Sorry for my English, the translator helps me) Tell me how to write a scroll forward and backward button. :upside_down_face:

15

I wouldn’t use Owl Carousel. It’s no longer being maintained. There are a number of other alternatives.

16

name / show 2-3 examples))))

17

Maybe this helps?

By @Lucas

18

Looks great, thanks, but I’m interested in a carousel of cards for product placement. Thanks)))

19

One of my favourites:

4 Likes
20

https://codepen.io/MarkSelux/pen/RzbPER This is the one I will try))))

21

I think there is massive room for someone to release a carousel and slider bric - for products etc and so many variable options on the side bar. @PeteSharp - you could make some pennies?..lol

23

I’ve used Splide. It’s also my new fav. That and Swiper.js

The site has full documentation to follow.

2 Likes