Product Carousel

I Need Help
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
24

2018 theme is alive :laughing:

25

Hi all,

Really interested in trying Splide. I tried the other day and struggling to make it work.

Looks great if I can figure it out!

26

This post will help you get started:

1 Like
27

Thanks @Jerry