Repository navigation
Responsive Settings
yoshidaman99 edited this page Mar 21, 2026
·
1 revision
Both widgets include responsive controls to adapt the carousel for different screen sizes.
The Container Carousel widget provides independent slides-per-view settings for each breakpoint:
| Setting | Default | Description |
|---|---|---|
| Slides Per View | 1 | Desktop (default viewport) |
| Slides Per View (Tablet) | 1 | Below tablet breakpoint |
| Slides Per View (Mobile) | 1 | Below mobile breakpoint |
| Setting | Default | Description |
|---|---|---|
| Space Between | 20px | Desktop gap |
| Space Between (Tablet) | 20px | Tablet gap |
| Space Between (Mobile) | 10px | Mobile gap |
| Breakpoint | Default | Description |
|---|---|---|
| Tablet | 1024px | Screens below this use tablet settings |
| Mobile | 767px | Screens below this use mobile settings |
The Slides Carousel widget has simplified responsive settings:
| Setting | Default | Description |
|---|---|---|
| Slides Per View (Tablet) | 1 | Tablet slides visible |
| Slides Per View (Mobile) | 1 | Mobile slides visible |
The space-between and breakpoint values inherit from the Carousel section settings.
| Breakpoint | Slides Per View |
|---|---|
| Desktop | 3 |
| Tablet | 2 |
| Mobile | 1 |
| Breakpoint | Slides Per View |
|---|---|
| Desktop | 4 |
| Tablet | 2 |
| Mobile | 1 |
| Breakpoint | Slides Per View |
|---|---|
| Desktop | 1 |
| Tablet | 1 |
| Mobile | 1 |
- Swiper breakpoints work as "max-width" — settings apply below the specified pixel value
- Breakpoint values are independent from Elementor's built-in breakpoints
- When using the Fade or Cube effect,
slidesPerViewmust remain 1 on all breakpoints