Product Carousel (Divi)

WooCommerce products in a Splide carousel for Divi 5: six card skins, quick view with variations, AJAX add to cart, badges and stock bars, a heading bar with the arrows on its line, rows, centre mode, peek, marquee and fade, arrows in six places, dots, bars, numbers, a counter, progress bars and play / pause.

1. New arrivals with a heading bar

Classic cards, four at a time (two on tablets and phones) · a heading, sub-heading and “Shop all” · the arrows above on the right, on the heading’s line · quick view on the image · percent-off sale badges · dots.

2. On sale, hover actions, autoplay

Hover skin — the cart button slides over the image · the second gallery image on hover · on-sale products · pill badges top right · autoplay every 3.5 s with the timer as a progress bar and play / pause · arrows at the sides on hover.

3. Boxed cards in centre mode

Card skin with a full-width icon + text button (and a quantity field on simple products) · rating with review count · stock status · centre mode with the side cards faded and shrunk · 60 px peek · click a side card to bring it forward · bars.

4. Two rows of list cards

List skin — image beside the text, two rows per slide, two columns (one on phones) · eight hand-picked products in order · arrows below with numbered pages between them.

5. Overlay marquee

Overlay cards (name and price on the image) moving without stopping, paused on hover — a ticker of the catalogue.

6. A count in the heading, a progress bar, swatches

New in the heading shows how many pieces there are · arrows above, a progress bar for pagination · colour swatches and brands on the cards · the wishlist heart beside quick view · an added-to-cart popup.

7. Two rows, peek and free drag

Two rows on desktops, one on phones, with their own row gap · moves two cards at a time (one on phones) · the next card peeks 60 px (20 px on phones) · free drag.

8. Autoplay that stops once you take over

Autoplay every 2.5 s, paused on hover — and stopped for good once a shopper drags or uses the arrows · rewinds at the end · a counter (3 / 12) below.

9. Natural heights, centred cards

Equal Height off, cards centred vertically · arrows outside the track · numbered pages · sizes as text and a short description · variable products open the quick view with “Choose options”.

10. Finished design

Minimal cards on a dark page · the arrows in the bottom-right corner · a counter (3 / 10) · the scroll position as a progress bar above · custom colours for cards, text, price, badges, buttons and navigation · Georgia titles.