The Media Carousel widget allows to showcase a series of media items, such as photos and videos, in a rotating slideshow format.
Adding Media Carousel widget
- Click on Elements buttons and select the Media Carousel widget from the list of available elements.
- Drag and drop the Media Carousel widget onto the desired location on your canvas.
Note:
The options under Slides Options and Additional Options in the Content tab will vary based on the selected skin type.
Content tab
Skin
Select one of the following skin types:
- Carousel: Displays media items in a rotating carousel format.
- Slideshow: Transitions between media items like a traditional slideshow.
- Coverflow: Shows media items in a 3D flow style.
Carousel
Carousel skin showcases a rotating carousel capable of displaying a predetermined number of images or videos simultaneously.
- Slides: By default, you have five slides labeled as Item #1, Item #2, Item #3, Item #4, and Item #5. You can add new slides or delete existing ones according to your needs. Click + Add Item or click the duplicate icon next to one of the existing tabs. This will create an exact copy of the existing tab.
- Effect: Choose from effects like Slide, Fade, or Cube.
- Slides Per View: Set the number of slides that should be visible at one time within the carousel.
- Slides Per Scroll: Define how many slides should move when the user scrolls or navigates through the carousel.
- Height: Specify the height of the carousel.
- Width: Define the width of the carousel.
Additional options for Carousel
- Arrows: Activate the toggle to show navigation arrows.
- Pagination: Select from pagination styles: None, Dots, Fraction, Progress.
- Transition Duration: Adjust the speed of slide transitions in milliseconds.
- Autoplay: Choose if the carousel should play slides automatically.
- Autoplay Speed: Set the interval between slide transitions in milliseconds.
- Infinite Loop: Decide if the carousel should loop continuously.
- Pause on Hover: Determine if autoplay should pause when hovering over the carousel.
- Pause on Interaction: Decide if autoplay should pause when interacting with the carousel.
- Overlay: Choose an overlay style as None, Text, or Icon.
- Image Resolution: Choose the appropriate image resolution.
- Image Fit: Decide how images should fit, Cover, Contain, or Auto.
Slideshow
This style is similar to a carousel but without pagination.
- Slides: By default, there are five slides labeled Item #1 to Item #5. You can add or delete slides as needed. Click + Add Item to add a new slide, or click the duplicate icon next to an existing tab to duplicate it.
- Effect: Choose between Slide, Fade or Cube transition effects:
- Height: Adjust the slider to set the height of the slideshow.
-
Thumbnails:
Slides Per View: Specify how many slides will appear at once in the slideshow, ranging from 1 to 10.
Ratio: Select the aspect ratio for the slides.
Additional options for Slideshow
- Arrows: Enable the toggle to show navigation arrows.
- Transition Duration: Adjust the speed of slide transitions in milliseconds.
- Autoplay: Choose if the carousel should play slides automatically.
- Autoplay Speed: Set the interval between slide transitions in milliseconds.
- Infinite Loop: Decide if the carousel should loop continuously.
- Pause on Interaction: Decide if autoplay should pause when interacting with the carousel.
- Image Resolution: Choose the appropriate image resolution.
- Image Fit: Decide how images should fit, Cover, Contain, or Auto.
Coverflow
Coverflow skin presents a slider with a central slide prominently displayed, flanked by two adjacent slides.
- Slides: By default, there are five slides labeled Item #1 to Item #5. You can add or delete slides as needed. Click + Add Item to add a new slide, or click the duplicate icon next to an existing tab to duplicate it.
- Slides Per View: Set the number of slides that should be visible at one time within the carousel.
- Slides Per Scroll: Define how many slides should move when the user scrolls or navigates through the carousel.
- Height: Specify the height of the carousel.
- Width: Define the width of the carousel.
Additional options for Coverflow
- Arrows: Activate the toggle to show navigation arrows.
- Pagination: Select from pagination styles: None, Dots, Fraction, Progress.
- Transition Duration: Adjust the speed of slide transitions in milliseconds.Autoplay: Choose if the carousel should play carousel automatically.
- Autoplay Speed: Set the interval between slide transitions in milliseconds.
- Infinite Loop: Decide if the carousel should loop continuously.
- Pause on Hover: Determine if autoplay should pause when hovering over the carousel.
- Pause on Interaction: Decide if autoplay should pause when interacting with the carousel.
- Overlay: Choose an overlay style as None, Text, or Icon.
- Image Resolution: Choose the appropriate image resolution.
- Image Fit: Decide how images should fit, Cover, Contain, or Auto.
Style tab
Slides
- Space Between: Adjust the space between slides using the slider.
- Background Color: Choose a background color for the carousel.
- Border Size: Determine the thickness of the carousel's border.
- Border Radius: Increase the border radius to create rounded corners around the carousel.
- Border Color: Select a color for the carousel's border.
- Padding: Set the internal spacing within the carousel.
Navigation
Arrows
- Size: Use the slider to adjust the size of the arrows.
- Color: Select the color for the arrows.
Pagination
- Position: Choose whether the pagination should appear inside or outside the slides.
- Size: Define the dot size.
- Color: Choose the color for the dots.
Play Icon
- Color: Set the color for the play icon.
- Size: Define the size of the play icon.
- Shadow: Apply a shadow effect to the video play icon.
Lightbox
- Color: Set the lightbox display color.
- UI Color: Define UI elements' color, including arrows, dots, and the close icon.
- UI Hover Color: Set the color change effect when hovering over UI elements.
- Video Width: Adjust the width of displayed videos in the lightbox.
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.