---
title: "Slide Ratio, Card Style & Responsive Navigation"
url: "https://divipeople.com/docs/divi-carousel-slide-ratio-card-style-doc.md"
canonical: "https://divipeople.com/docs/divi-carousel-slide-ratio-card-style-doc/"
published: "2026-08-08"
modified: "2026-08-08"
author: "Fahim Reza"
tags:
  - "Divi Carousel Free"
  - "Divi Carousel Pro"
---

# Slide Ratio, Card Style & Responsive Navigation

This page covers the carousel settings added or restored in **Divi Carousel Pro 4.2.0** and **Divi Carousel Free 3.2.0**. Most solve a specific layout problem, so each section explains what the setting is for as well as where to find it.

## Slide Ratio

**Content → Carousel Settings → Slide Ratio.** Crops every slide to one shape, so all slides are the same height no matter what you feed the carousel.

This is the fix for the most common carousel complaint. If you mix portrait and landscape photographs at their natural size, a single tall image stretches the entire track to its height and the carousel looks broken. Setting a ratio makes that impossible.

- **Natural** — no cropping. Each slide keeps its own proportions. Fine when every image is already the same shape.
- **1:1** — square. Good for products and thumbnails.
- **4:3** and **3:2** — classic photo shapes.
- **16:9** — widescreen. The usual choice for hero galleries.
- **3:4** — portrait, for people and tall product shots.

> Cropping is done with `object-fit: cover`, so images fill the shape without distorting. The centre of the image is kept.

## Slide Width: Fit Content

**Content → Carousel Settings → Slide Width.** By default the track is divided evenly by the slide count. Set this to **Fit Content** and each slide sizes itself instead.

This is the right behaviour for a logo wall, where brand marks are not all the same width and forcing them into equal columns leaves awkward gaps.

## Card Style

**Content → Carousel Settings → Card Style**, on the **Post Carousel** and **Product Carousel**.

- **None** — the default. Content sits directly on the page background.
- **Boxed Card** — gives each slide a real card surface: background, padding, border and rounded corners.

Card Style is opt-in. Existing carousels are untouched until you switch it on, or apply a preset that includes it such as *Editorial* or *Shop Card*.

## Transition Easing

**Content → Carousel Settings → Transition Easing.** Controls the acceleration curve of the slide movement — `ease`, `linear`, `ease-in`, `ease-out`, `ease-in-out`, or a springy overshoot.

Pair it with **Transition Speed**. A 900ms `ease-in-out` feels considered; `linear` is the right choice for a continuously drifting logo strip.

## Dot Alignment

**Design → Pagination → Alignment.** Pushes the pagination dots **left**, **center** or **right** instead of always centring them. Useful when the dots need to line up with the text column rather than the carousel.

## Per-Device Navigation

**Content → Carousel Settings → Navigation & Pagination** is responsive. Hover the setting’s label and pick the desktop, tablet or phone icon to give each breakpoint its own value.

A common combination: **Arrows** on desktop, **Dots** on tablet, **None** on phone — where swiping is the obvious gesture and arrows just take up room. **Slides to Show** is responsive in the same way.

## Right to Left

**Content → Carousel Settings → Sliding Direction → Right to Left.** Flips the carousel properly for RTL languages: the track moves right on *next*, and drag direction, arrow order and keyboard order all follow.

## Autoplay and the Pause Control

Whenever autoplay is on, a small pause/play button appears in the corner of the carousel. This is required for accessibility — visitors must be able to stop motion that starts on its own — and it cannot be switched off separately. Autoplay also stops as soon as someone interacts with the carousel, and is skipped entirely for visitors who have asked their system to reduce motion.

## FAQ

### Which ratio should I use?

16:9 for wide hero galleries, 1:1 for products and logos, 3:4 for portraits. If every image you are using is already identically shaped, **Natural** is fine.

### Will Slide Ratio distort my images?

No. Images are cropped to fill the shape, never stretched. If an important detail sits at the very edge of a photo, a crop may cut it — in that case pick a ratio closer to the image’s own shape.

### Does Card Style change my existing carousels?

No. It defaults to **None**, which is exactly how Post and Product carousels rendered before.

### Why can I not remove the pause button?

It is what makes an autoplaying carousel accessible under WCAG. If you would rather not show it, turn autoplay off — then it is not needed and does not appear.