Skip to content
StoreDocsSupport
Get Divi Torque

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.

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.

  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.
  • 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.
  • Vertical Direction: Slide up and down instead of left and right. Off by default.

Autoplay & Motion

  • Autoplay: On by default.
  • Autoplay Delay: How long each slide stays before the carousel advances, in milliseconds. Default 3000ms.
  • Transition Speed: Default 600ms.
  • Transition Easing: Ease In-Out (default), Linear, Ease, Ease In, or Ease Out.
  • Infinite Loop: On by default. Loops back to the first slide after the last.

Interaction

  • Drag / Swipe: On by default. Responsive, so you can turn it on for phones 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.

Arrows & Dots

  • 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) or Numbers.
  • Previous Arrow Icon and Next Arrow Icon: Pick your own icons.

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 (44px each by default), Arrow Icon Size, Arrow Corner Radius, and Arrow Skew.
  • 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.
  • 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.
  • Spacing Top and Spacing Bottom: Responsive spacing around the carousel.

Image

  • The Image group sets the image height for each slide. Leave it at auto for natural height.

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.

If you use autoplay, give each slide enough time to be read. Increase Autoplay Delay if your slides carry text.

Frequently asked questions

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, Drag / Swipe, Show Arrows, and Show Dots are responsive in the same way.

Yes. Autoplay is on by default. Set Autoplay Delay in milliseconds, where 5000 is five seconds per slide. Keep Infinite Loop on so the carousel returns to the first slide instead of stopping on the last.

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.

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.