[admin-2531]

Hello, I have multiple carousels on my homepage, each set to display products from different categories, or to display lists of categories.

Because there is no visual indication when the page loads that each of those carousels is in fact a carousel, visitors can miss out on a lot of our content. Currently, arrows only appear onhover.

To improve this, I would like to change how many items are displayed in the carousel to 4.5 items on desktop, 3.5 on tablet, and 1.5 on mobile. None of the settings I’ve seen respond to 1/2. Ideally, the 1/2 product that is visible would also have a fade gradient over it.

Can you please advise how I can make changes like this or similar?

Thanks

[Althemist]

Hi admin-2531,

I am afraid that would not be possible. What you can do is show the arrows with CSS. Something like this:

.woocommerce.owl-carousel .owl-nav .owl-prev {
  left: 5px;
}
.woocommerce.owl-carousel .owl-nav .owl-next {
  right: 5px;
}

[admin-2531]

This could work, thanks, however, the current design of the arrows is a bit obtrusive. Especially on mobile where they take up almost half the image width.

1) How can I change those to a transparent background with opaque grey arrows? That design seems to be more common, right?
2) The left arrow appears on the first item when there is no item left of it. How can I change this to no display in that case?

Thanks!

[Althemist]

Hi admin-2531,

1). You can use CSS for this.

2) I am afraid that would not be possible. This is how Owl Carousel script (the one we use) works.

[admin-2531]

OK, thanks. Can you tell me how I can change the display in mobile to show 2 items in the carousel instead of 1?

[Althemist]

Unfortunately, there is no such option. If it’s a carousel it’ll show 1 item on mobiles.

[Author]

Posts