Skip to content
Get Divi Torque

Image Carousel

The Image Carousel module builds a responsive Divi carousel inside the Divi Builder — arrows, dots, autoplay, drag-and-swipe, and a different number of slides per device, with no shortcode and no custom CSS. It is free in Divi Torque Lite and runs in both 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, and its scripts and styles load only on pages that actually 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, then set Slides to Show per device under Carousel Settings.

Content

These options control how the carousel behaves. They live on the parent module and apply to every slide.

  • Slides to Show — how many slides are visible at once, from 1 to 8. This is a responsive option, so the usual pattern is 4 on desktop, 2 on tablet, 1 on phone.
  • Slides to Scroll — how many slides advance per step, also responsive.
  • Gap Between Slides — spacing between slides, 0 to 100px.
  • Variable Slide Width and Slide Width — let slides size themselves individually instead of splitting the row evenly.
  • Autoplay and Autoplay Delay — advance automatically, with the pause between slides set in milliseconds.
  • Transition Speed and Transition Easing — how long the slide animation takes and its easing curve.
  • Infinite Loop — rewind to the first slide instead of stopping at the end.
  • Drag / Swipe — allow mouse drag and touch swipe. Responsive, so you can enable it on phone only.
  • Center Active Slide, Center Mode Style, and Center Peek — highlight the middle slide and show a sliver of the slides either side.
  • Vertical Direction — scroll up and down instead of left and right.
  • Show Arrows and Show Dots — both responsive, so you can use arrows on desktop and dots on phone.

Slides

Each Image Carousel Item holds one slide: an image with its own alt text, an optional title and subtitle, and an optional button with text, link, and icon.

The fastest way to style a slide is Card Preset, which sets the whole card in one click. There are five: Custom (manual, nothing applied), Overlay Gradient, Boxed Card, Minimal, and Hover Reveal. Pick a preset first, then adjust only what you want to change.

Beyond the preset, each slide has Content Position Type (normal, or absolutely positioned over the image), horizontal and vertical placement with offsets, content width, alignment, and an Image Hover Animation with 19 options including zoom in, zoom out, pulse, flip, and several slide-in and fade effects.

Design

Start with Arrow Layout: Overlay places the arrows on top of the slides, Alongside places them outside the carousel. From there you can swap the left and right icons, set colour and background for both normal and hover states, and control height, width, icon size, radius, skew, border width, colour, and style.

Positioning is handled by Arrows Vertical Edge, Arrows Horizontal Edge, the X and Y offsets, Gap, and Center the Arrows — enough control to sit the arrows anywhere around the carousel without custom CSS.

Pagination Dots

Pagination Type switches between classic dots and numbers. Dots have separate colours for the normal and active state, independent height, width, and active width (so the current dot can stretch into a pill), radius, spacing between dots, alignment, and a vertical offset from the carousel. Numbers get their own colour, size, and active colour.

Layout and Cursor

  • Spacing Top and Spacing Bottom — responsive padding around the carousel.
  • Custom Cursor — replace the pointer over the carousel with grab, pointer, move, or one of the illustrated cursors.

Tip

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

If you use autoplay, keep Autoplay Delay at 4000ms or more. Anything faster moves on before most people finish reading the slide.

Frequently asked questions

Yes. Image Carousel and Logo Carousel are both included in Divi Torque Lite, free on WordPress.org. Divi Torque Pro adds further carousel modules, including the Testimonial Slider and Post Carousel.

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

Open Content → Carousel Settings, hover Slides to Show, and click the responsive icon to reveal the desktop, tablet, and phone tabs. Set a value on each. Slides to Scroll, Drag / Swipe, Show Arrows, and Show Dots are responsive in the same way.

Yes. Turn on Autoplay and set Autoplay Delay in milliseconds — 5000 is five seconds per slide. Pair it with Infinite Loop so the carousel rewinds rather than stopping on the last slide.

Yes. It is built natively for Divi 5 and also runs in Divi 4. Divi 4 layouts using the module convert automatically the first time you open them in the Divi 5 Builder.

The carousel library loads only on pages that contain a carousel module, so pages without one carry no extra JavaScript or CSS. The biggest performance factor is your own images — size them to roughly the width a single slide occupies rather than uploading full-resolution photos.