Image Carousel

Step-by-Step Tutorial on Using the Image Carousel Widget of Zyre Addon.

With Zyre Addon’s Image Carousel Widget, you can showcase multiple images in a sleek, interactive slider. From product galleries to portfolio showcases, this widget lets you control navigation, autoplay, and styling—turning simple images into an engaging scrolling experience.

Learn How To Use Image Carousel Widget:

Exploring the Features of Image Carousel Widget.

Step 1: Drag the widget

From the left panel, search or choose the Image Carousel of Zyre Addon and simply drag it into your desired section.

Step 2: Content tab

Carousel Content:

Image Carousel Style : You can choose a predefined style from here
Slide Items : Create and manage multiple slide items.
- Image Selection : Upload a custom image.
- Title : Set image title.
- Sub Title : Set image subtitle.
- Link : Set URL for the image carousel item.
Image Resolution : Control the quality of list images.
Title HTML Tag : Set title for the html element.
Overlay Content on Image : Toggle to show overlay contents on image.

Carousel Settings:

Navigation : Choose how users navigate between slides (arrows, pagination, both, or none).
Transition Duration : Control the speed of slide transitions.
Slides per View : Set how many slides are visible at once.
Slides to Scroll : Define how many slides move with each navigation.
Space Between : Adjust the gap between slides.
Autoplay : Enable automatic slide transitions.
Autoplay Speed : Set the time interval for autoplay.
Infinite Loop : Loop slides continuously without stopping.
Pause on Hover : Stop autoplay when the user hovers over the carousel.
Pause on Interaction : Stop autoplay when interacting with the carousel.
Lazy Load : Load images only when needed to improve performance.
Direction : Choose the slide direction (left, right).

Step 3: Style tab

In the Style section, you can customize the Wrapper, Navigation, Content – but make sure you have added them first.

Wrapper:

Height : Set the overall height of the carousel wrapper.
Transition Effect : Choose the animation effect used when slides change (e.g., slide, fade).

Navigation:

Position : Set the placement of navigation arrows (outside, inside)
Size : Adjust the overall arrow size.
Padding : Control spacing inside the navigation arrows.
Border Type : Customize border style, width, and color.
Border Radius : Round the corners of the arrows.
Normal & Hover States :
- Background Color : Choose arrow background color.
- Icon Color : Set arrow icon color.
- Box Shadow : Apply drop shadow effects.
Prev Arrow Margin : Adjust spacing around the previous arrow.
Next Arrow Margin : Adjust spacing around the next arrow.

Content:

Background Type with Color : Set unique background colors or gradients. Explore full background settings here.
Padding : Adjust inner spacing within the item content.
Height : Set the height of the content.
Vertical Align : Control vertical positioning for item content.
Alignment : Set text content alignment.

Title:

Typography : Adjust font family, size, weight, transform, style, decoration, line height, letter spacing, and word spacing. Explore full typography settings here.
Color : Set the Title text color.
Spacing : Adjust spacing from the subtitle.

Sub Title:

You’ll find the same design options for the Subtitle as in the Title — giving you full freedom to style it just the way you imagine.

Image:

Fit Image As : Control how the image fits inside its container (cover, contain, fill, etc.).
Border Type : Customize border style, width, and color.
Border Radius : Adjust corner roundness of the image.
Padding : Set spacing inside the image container.

Step 4: Advance tab

If you want to customize the layout, backgrounds, or make your design more engaging, head over to the Advanced section. The Advanced panel is a default Elementor feature. Check out this document to learn more about its features.

Finally, hit the Publish button and watch your stunning Image Carousel come to life on your webpage!

You’re all set!