The Image Carousel widget lets users showcase images in a rotating carousel format. You can upload several images, which will scroll horizontally according to your preferences. This widget offers customization options like layout positioning, navigation controls, auto-play settings, and more.
Adding Image Carousel widget
- Drag the Image Carousel widget to the canvas.
- Go to the Content tab and select the Image Carousel section, then click the + icon to add your images to the carousel.
- Choose your images and click the Create a new Gallery button.
- You can add captions to your images if needed then click the Insert gallery button.
Content tab
Image resolution: Choose from given sizes or select a custom size for your images.
Slides to show: Select how many images you want to display simultaneously in the carousel, from 1 to 10.
Slides to scroll: Decide how many images will scroll with each swipe.
Image stretch: Enable this option if you want the images to stretch and fill the carousel space.
Navigation: Choose how users will navigate the images: Arrows, Dots, Both, or None and choose your preferred icons for the Previous Arrow Icon and Next Arrow Icon.
- Star button: Click on this button in the Image Carousel widget to change the arrow to an icon from the icon library.
- Upload SVG: Use the SVG upload button to replace the arrow with an SVG image.
Link: You can link images to their respective Media Files, add Custom URLs, or select None if you don't want any links.
Media files: If you choose to link to Media Files, you'll have the option to display the images in a Lightbox by selecting Yes or No.
Custom URL: You can add the custom URL, then click the gear icon ⚙️ to access settings for the link. Here, you can set the link to open in a new window or choose ‘Add nofollow’ option. This helps control how the links behave when clicked.
Custom attributes: Assign additional attributes to the link. Separate each attribute with a pipe (|) and use commas to separate different pairs. This allows for precise customization of link elements, like adding specific styles or data tags.
Caption: You can choose which existing image data (title, caption, or description) to display as the carousel caption.
Additional options
These settings allow you to customize the behavior and performance of your image carousel to better engage your viewers and match your website's style.
Lazy load: Activate the Lazyload toggle to load images only as they come into view.
Autoplay: Select Yes to have slides move automatically, or No to require manual advancement.
Pause on hover: Choose Yes to pause the automatic playback when a mouse hovers over the carousel, or No to keep it running.
Pause on interaction: Select Yes to pause autoplay when you interact with the carousel, such as clicking on a navigation arrow, or No to continue autoplay despite interactions.
Autoplay speed: Set the speed at which slides change automatically
Infinite loop: Choose Yes to continuously cycle through the slides in a loop, or No to stop the carousel after the last slide.
Animation speed: Adjust how quickly the slide transitions occur.
Direction: Decide the direction of the carousel movement: choose from left to right or from right to left based on your layout and design preferences.
Style tab
Arrows
- Position: Choose whether the arrows are positioned inside or outside the slider to fit your design needs.
- Size: Adjust the size of the arrows using a slider. You can set this in pixels (PX), ems (EM), rems (REM), or a custom size.
- Color: Select a color for the arrows
Pagination
- Position: Decide if the dots should be inside or outside the slider
- Size: Define the size of the dots, with options to set this in PX, EM, REM, or as a custom size.
- Color: Choose a color for the dots.
- Active color: Select a distinct color for the dot that represents the currently active slide, making it easy for users to see which slide they are viewing.
Image
Vertical align: Choose to align images to the top, middle, or bottom of the carousel.
Spacing: Set the spacing between slides using the default spacing of 20px or set a custom spacing.
Border type: Choose a border style, selecting from None, Solid, Double, Dotted, Dashed, or Groove.
- Border width: Adjust the thickness of the border surrounding your images.
- Border color: Adjust the border radius to create rounded corners around your images.
- Border radius: Choose a color for the border.
Advanced Tab
You can customize the widget further using the settings available in the Advanced tab. These options provide additional styling and functionality adjustments, allowing you to tailor the widget to better fit your design needs.