Image Carousel

Image Carousel builds a responsive Divi carousel with arrows, dots, autoplay, drag and swipe, and a different number of slides for each device. You need no shortcode and no custom CSS. It works in Divi 4 and Divi 5.

In Divi 5 it can also scroll continuously like a film strip, change slides with a Fade, Coverflow, Cards, Flip or Cube effect, and show a thumbnail strip, pinch to zoom, several rows, and a pause button. Options marked Divi 5 only are not in the Divi 4 version of the module.

Each slide is its own child module, so a slide can carry an image, a title, a subtitle, and a button, and every slide can be styled independently. The carousel runs on Swiper. Its scripts and styles load only on pages that contain a carousel.

How to add the Image Carousel module

1. Open a page with the Divi Builder and add a section and row.
2. Click the + icon, search for Image Carousel, and insert it.
3. Add an Image Carousel Item for each slide.
4. In the Content tab, open the Slides group and set Slides to Show for each device.

Content

These settings are on the parent module and apply to every slide.

Slides

• Slides to Show: How many slides are visible at once. Range 1 to 8, default 3. This is a responsive option, so a common pattern is more slides on desktop and fewer on tablet and phone.
• Slides to Scroll: How many slides move each step. Default 1. Responsive.
• Gap Between Slides: Default 15px.
• Rows: 1 to 4 rows of slides that scroll together, like a gallery wall. Default 1. Rows need the Slide effect, and more than one row turns off Infinite Loop and Continuous Scroll. Divi 5 only.
• Vertical Direction: Slide up and down instead of left and right. Off by default.
• Variable Slide Width and Slide Width: Let each slide keep its own width instead of an equal share. Slide Width (default 360px) applies when Variable Slide Width is on. Slide Width is responsive.
• Image Height: One height for every image. With Variable Slide Width on, each slide then takes its image's own width, so portrait and landscape images share one row. With it off, every image is cropped to this height, so images of different shapes line up. Responsive. Leave it empty to keep each image's natural height. Divi 5 only.

Autoplay & Motion

• Autoplay: On by default.
• Autoplay Style: Slide by Slide (default) pauses on each slide. Continuous Scroll moves the slides at a steady speed without stopping, like a film strip. It loops on its own, so the arrows, dots and Infinite Loop do not apply to it. It needs the Slide effect and one row. Divi 5 only.
• Autoplay Delay: How long each slide stays before the carousel advances, in milliseconds. Default 3000ms. Slide by Slide only.
• Scroll Speed: How far the slides travel each second in Continuous Scroll, in pixels. Range 10 to 400, default 60. 40 to 80 reads as a calm film strip. Divi 5 only.
• Reverse Direction: Move the slides left to right, or top to bottom when vertical. Works in both autoplay styles. Divi 5 only.
• Transition Speed: Default 600ms. Slide by Slide only.
• Transition Easing: Ease In-Out (default), Linear, Ease, Ease In, or Ease Out. Slide by Slide only.
• Infinite Loop: On by default. Loops back to the first slide after the last. If a carousel has too few slides for its layout, the loop turns off so slides do not repeat or go blank.
• At the Last Slide: When Infinite Loop is off. Return to Start (default): autoplay goes back to the first slide. Return to Start, Arrows Too: the arrows and swiping wrap around as well. Stop on the Last Slide: autoplay ends there. Divi 5 only.
• Pause on Hover: On by default. Stops the motion while the pointer is over the carousel. In Continuous Scroll it stops on the spot and continues from the same place. Divi 5 only.
• Stop After Interaction: Off by default. Once a visitor drags, clicks an arrow or dot, or uses the keyboard, autoplay stops. The pause button, if shown, starts it again. Divi 5 only.

Autoplay also pauses while the carousel is scrolled out of view, and while a link inside it has keyboard focus. When a visitor has asked their device for reduced motion, autoplay stays off. If the carousel has a pause button, it shows play, and pressing it starts the motion.

Transition Effect

• Effect: Slide (default), Fade, Coverflow, Cards, Flip or Cube. Fade, Cards, Flip and Cube show one slide at a time, so Slides to Show, Slides to Scroll and the gap do not apply. Coverflow keeps the active slide in the center and tilts the others. Divi 5 only.
• Coverflow Tilt, Coverflow Depth, Coverflow Spacing: How far the side slides turn (default 50deg), sit back (default 100px), and pull in or push apart (default 0px). Divi 5 only.
• Slide Shadows: Shade the slides as they turn. On by default. Applies to Coverflow, Cards, Flip and Cube. Divi 5 only.

With an effect, every slide shows whole, so give the slides one shape: set Image Height, or use images of the same size.

Interaction

• Drag / Swipe: On by default. Responsive, so you can turn it on for phones only. In Continuous Scroll a drag throws the strip, and it glides to a stop before it picks up speed again.
• Free Scroll: Drag or flick the slides and they glide to a stop with momentum, instead of moving one slide at a time. Snap to Slides settles on the nearest slide edge. Divi 5 only.
• Mouse Wheel: Scroll the slides with a trackpad or a horizontal mouse wheel. Scrolling up and down still scrolls the page. Divi 5 only.
• Pinch to Zoom: Pinch or double-tap an image to zoom in, up to three times. On a computer, double-click. Divi 5 only.
• Center Active Slide: Off by default. Keeps the active slide centered with a peek of the slides on each side.
• Center Mode Style: Classic (default) or Highlighted. Highlighted scales the active slide up and dims the rest.
• Center Peek: How much of the neighboring slides shows in classic center mode. Default 70px.
• Custom Cursor: Off by default. With it on, choose a Cursor Style: Grab (default), Pointer, Move, Default, Pizza, or Burger.
• Parallax Captions and Parallax Distance: Move each slide's title and caption a little slower than its image as the slides change. Distance default 60px. Divi 5 only.

Controls

• Show Arrows: On by default. Responsive.
• Show Dots: Off by default. Responsive, so you can show arrows on desktop and dots on phones.
• Arrow Layout: Overlay (default) places the arrows over the slides. Alongside places them side by side.
• Pagination Style: Dots (default), Numbers, Progress Bar (a bar that fills as the slides advance), or Dynamic Dots (a long row of dots shrinks to the few around the current slide). Progress Bar and Dynamic Dots are Divi 5 only.
• Previous Arrow Icon and Next Arrow Icon: Pick your own icons.
• Draggable Scrollbar: A scrollbar under the slides that visitors can drag. Divi 5 only.
• Pause Button and Pause Button Position: A pause and play button in a corner of the slides, so visitors can stop the motion. It takes its look from Arrow Style and Arrow Border. Divi 5 only.
• Autoplay Progress Bar: A thin bar along the bottom of the slides that fills until the next slide. Slide by Slide only. Divi 5 only.

Thumbnails

• Show Thumbnails: A strip of small images under the carousel. Clicking one, or pressing Enter on it, shows that slide, and the current slide is highlighted. Divi 5 only.
• Thumbnails to Show: How many fit across the strip. Range 2 to 12, default 6. Responsive. Divi 5 only.
• Thumbnail Gap: Default 8px. Divi 5 only.

Slide settings

Each Image Carousel Item holds one slide. In its Content tab you set the image and Image Alt Text, an optional Title and Subtitle, and an optional button with text, link, new tab option, and icon.

In the item's Settings group:

• Card Preset: Sets the whole card design. Choose Custom (manual, default), Overlay Gradient, Boxed Card, Minimal, or Hover Reveal. Pick a preset first, then adjust only what you want to change.
• Content Position Type: Normal (default) or Over Image.
• Content Position: Top or Bottom (default). This applies to the Normal type.
• Content Text Alignment and Content Width.
• Content Horizontal Placement, Content Horizontal Offset, Content Vertical Placement, and Content Vertical Offset: These apply when the content is over the image.
• Image Hover Animation: None (default), or an effect such as Zoom In, Zoom Out, Pulse, Flip, or a slide-in and fade effect.

Design

Arrow Style, Arrow Border, and Arrow Position

• Arrow Style: Arrow Icon Color, Arrow Background (both have hover states), Arrow Height and Width, Arrow Icon Size, Arrow Corner Radius, and Arrow Skew. The pause button uses the same style.
• Arrow Border: Arrow Border Width, Arrow Border Color, and Arrow Border Style.
• Arrow Position: Arrows Vertical Edge, Arrows Horizontal Edge, Arrow Horizontal Offset, Arrow Vertical Position, Gap Between Arrows, and Center the Arrows. Use these to place the arrows around the carousel without custom CSS.

Dot Style, Dot Position, and Number Style

• Dot Style: Dot Color and Active Dot Color, Dot Height, Dot Width, Active Dot Width (widen it for a pill shape), and Dot Corner Radius. The colors, height and radius also style the Progress Bar pagination, the scrollbar and the autoplay progress bar.
• Dot Position: Alignment, Dot Spacing, and Dots Spacing Top.
• Number Style: Number Color, Number Size, and Active Number Color, used when Pagination Style is Numbers.

Thumbnail Style

• Thumbnail Height (default 80px, responsive), Thumbnail Corner Radius, Inactive Thumbnail Opacity (default 50%), Active Thumbnail Border Color and Width, and Thumbnail Spacing Top. Divi 5 only.

Carousel Spacing

• Spacing Top and Spacing Bottom: Responsive spacing around the carousel.

Image

• The Image group sets the border and corner radius of the slide images.

Tip

Set Slides to Show for every device before you style anything. A carousel that looks right with several slides across on desktop can be unreadable at the same count on a phone, and fixing the slide count afterwards changes how every design value reads.

For Continuous Scroll, add at least twice as many slides as Slides to Show, and keep Scroll Speed between 40 and 80 pixels a second for a strip people can actually look at. Turn on the pause button if the strip carries text or links.

Frequently asked questions

How do I make the carousel scroll without stopping?

Open Autoplay & Motion and set Autoplay Style to Continuous Scroll. Then set Scroll Speed in pixels per second. The slides move at that speed without pausing between them, and the strip loops on its own. Pointing at it pauses it on the spot. Continuous Scroll is in the Divi 5 module.

How do I show a different number of slides on mobile?

Open the Content tab and the Slides group. Hover over Slides to Show, and click the responsive icon to reveal the desktop, tablet, and phone tabs. Set a value on each. Slides to Scroll, Slide Width, Image Height, Drag / Swipe, Show Arrows, and Show Dots are responsive in the same way.

Can the carousel play automatically?

Yes. Autoplay is on by default, with two styles. Slide by Slide pauses on each slide for the Autoplay Delay, in milliseconds, where 5000 is five seconds. Continuous Scroll never pauses and moves at the Scroll Speed you set. Keep Infinite Loop on for Slide by Slide so the carousel returns to the first slide instead of stopping on the last.

Can visitors stop the motion?

Yes. Autoplay pauses while the pointer is over the carousel (Pause on Hover), while a link inside it has keyboard focus, and while it is scrolled out of view. Turn on the Pause Button to give visitors a pause and play control. Visitors who ask their device for reduced motion get a still carousel until they press play.

Does the Image Carousel work in Divi 5?

Yes. It is built natively for Divi 5 and also runs in Divi 4. Divi 4 layouts that use the module convert when you open them in the Divi 5 Builder. Continuous Scroll, the transition effects, thumbnails, rows and the other options marked Divi 5 only work after that conversion.

Will the carousel slow my site down?

The carousel library loads only on pages that contain a carousel module, so other pages carry no extra JavaScript or CSS from it. The biggest performance factor is your own images. Size them to roughly the width a single slide occupies instead of uploading full-resolution photos.