Skip to content
StoreDocsSupport
Get Divi Torque

Advanced Carousel

The Advanced Carousel module shows image slides in a Swiper-powered carousel. Its one job is a sliding set of image cards, each with optional text and a button.

How to add it

  1. Open the page in the Divi 5 Visual Builder.
  2. Add a module to a row and search for Advanced Carousel.
  3. Add slides with the module's item control. Each slide is an Image Carousel Item.
  4. Fill in each slide, then adjust the carousel settings on the parent module.

Content tab: Advanced Carousel (parent)

Slides

  • Slides to Show: default 3, range 1 to 8. Lower this on tablet and phone.
  • Slides to Scroll: default 1, range 1 to 8.
  • Gap Between Slides: default 15px.
  • Vertical Direction: off by default. Slides up and down instead of left and right.
  • Variable Slide Width: off by default. Each slide keeps its own width.
  • Slide Width: default 360px. Used when Variable Slide Width is on.

Autoplay & Motion

  • Autoplay: on by default.
  • Autoplay Delay: default 3000ms.
  • Transition Speed: default 600ms.
  • Transition Easing: Ease In-Out (default), Linear, Ease, Ease In, Ease Out.
  • Infinite Loop: on by default.
  • Right to Left: off by default. Sets the carousel to dir="rtl".

Interaction

  • Drag / Swipe: on by default.
  • Center Active Slide: off by default. Keeps the active slide centered with a peek of the slides beside it.
  • Center Mode Style: Classic (default) or Highlighted. Highlighted scales the active slide up and dims the others.
  • Center Peek: default 70px. Applies to classic center mode.
  • Custom Cursor: off by default.
  • Cursor Style: Grab (default), Pointer, Move, Default, Pizza, Burger.

Arrows & Dots

  • Show Arrows: on by default.
  • Arrow Layout: Overlay (default) or Alongside.
  • Previous Arrow Icon and Next Arrow Icon: icon pickers.
  • Show Dots: off by default.
  • Pagination Style: Dots (default) or Numbers.

Content tab: Image Carousel Item (each slide)

Content

  • Image, Image Alt Text.
  • Title and Subtitle.
  • Show Button: off by default. Then Button Text, Button Link URL, Open Button Link in New Tab (off by default) and Button Icon.

Settings

  • Card Preset: Custom (manual) (default), Overlay Gradient, Boxed Card, Minimal, Hover Reveal.
  • Content Position Type: Normal (default) or Over Image.
  • Content Position: Top or Bottom (default). Normal type only.
  • Content Text Alignment: Left (default), Center, Right.
  • Content Width: default 100%.
  • Content Horizontal Placement: Center (default), Left, Right. Over Image only.
  • Content Horizontal Offset and Content Vertical Offset: default 0px.
  • Content Vertical Placement: Center (default), Top, Bottom. Over Image only.
  • Image Hover Animation: None (default), plus Zoom In, Zoom Out and a list of animation effects such as Pulse, Bounce, Shake, Tada and Slide In Up.
  • Arrow Style: Arrow Icon Color, Arrow Background, Arrow Height and Width (44px), Arrow Icon Size, Arrow Corner Radius, Arrow Skew.
  • Arrow Border: Arrow Border Width, Arrow Border Color, Arrow Border Style.
  • Arrow Position: Arrow Horizontal Offset, Arrow Vertical Position, Arrows Vertical Edge, Arrows Horizontal Edge, Gap Between Arrows, Center the Arrows.
  • Dot Style: Dot Color, Active Dot Color, Dot Height, Dot Width, Active Dot Width, Dot Corner Radius.
  • Number Style: Number Color, Number Size, Active Number Color.
  • Dot Position: Alignment, Dots Spacing Top, Dot Spacing.
  • Carousel Spacing: Spacing Top, Spacing Bottom.
  • Image: Image Height (auto by default) and Image Border.
  • Content: Content Padding and Content Background.
  • Overlay: Overlay toggle (off by default), Speed, Icon, Icon Color, Icon Size, Overlay Color, Icon Opacity.
  • Title: font settings and Title Spacing Bottom.
  • Subtitle: font settings.
  • Button: Spacing Top, Text Color, Background Color, Text Size, Border Width, Border Color, Corner Radius, Padding, Margin.

FAQ

Does it work in Divi 4?

Yes. A Divi 4 version exists (shortcodes torq_carousel and torq_carousel_child). This page describes the Divi 5 settings.

The Divi 5 render code outputs a Swiper container and passes the settings to Swiper as a JSON config.

Can I show a different number of slides on tablet and phone?

Yes. Slides to Show supports responsive values in the builder, so you can set different counts per device.

How do Vertical Direction and Variable Slide Width affect the other settings?

With Vertical Direction on, the carousel shows one slide at a time along the vertical axis. With Variable Slide Width on, Swiper sizes each slide from Slide Width, and Slides to Scroll is ignored. Both are set in the render config (CarouselEngine.php).