Zephyr
Impreza
Guide
Support Forum

Content Carousel

Updated 3 days ago

Content Carousel is the element that allows to rotate/slide items with different content. Live Examples

How to Add Elements into Content Carousel #

Drag and drop elements inside the Content Carousel, choosing position via marker.

Press the "plus" icon and pick the needed element from the list.

Elements that can't be added inside the Content Carousel

  1. Row/Section
  2. Accordion
  3. Carousel
  4. Color Scheme Switch
  5. Contact Form
  6. Content Carousel
  7. Dropdown
  8. Gallery
  9. Grid
  10. Grid Filter
  11. Grid Order
  12. Image Slider
  13. List Filter
  14. List Order
  15. List Search
  16. Login
  17. Map
  18. Page Scroller
  19. Post List
  20. Post Carousel
  21. Product List
  22. Product Carousel
  23. Reusable Block
  24. Search
  25. Separator
  26. Tabs
  27. Term List
  28. Term Carousel
  29. User List
  30. Vertical Tabs (Tour)

Carousel Settings #

The settings below work similarly across all carousel elements, including Post Carousel, Product Carousel, Term Carousel, and User Carousel.

This group of settings allows you to customize the appearance of the Content Carousel.

The Number of Items to Show defines the number of items that should appear on a single slide of the carousel. When set to Auto, it will define this number automatically, based on the width of inner elements.

Continual Rotation via CSS #

When both "Auto Rotation" and "Continual Rotation" switches are active, you can activate the "Continual Rotation via CSS."

This option is specifically designed for the continuous rotation of items with different widths while maintaining a constant rotation speed. Best suited for a carousel of differently-sized logos.

While Continual rotation via CSS is active, Navigation settings are ignored and stay hidden on the page.

The regular "Continual Rotation" calculates each item's rotation speed based on its width. Without "Continual rotation via CSS", differently sized items will rotate at different speeds. 

Navigation Settings #

The settings below work similarly across all carousel elements, including Post Carousel, Product Carousel, Term Carousel, and User Carousel.

This group of settings allows you to add and customize the appearance of navigation arrows and dots for the Content Carousel.

You can define if the slide changing should be possible via dragging on different devices by using relevant switches:

  • Slide by mouse drag.
  • Slide by touch drag.

Responsive Settings #

The settings below work similarly across all carousel elements, including Post Carousel, Product Carousel, Term Carousel, and User Carousel.

This group of settings allows you to customize the Content Carousel appearance and navigation for different devices.

Use pre-defined or custom screen Breakpoint Width to apply needed changes.

In Responsive, Prev/Next arrows and Dots inherit the appearance from the Navigation settings.