Media Carousel

Responsive Addons for Elementor (RAE) Media Carousel allows you to create carousels and sliders that beautifully showcase your images and videos.

Content #

The widget comes with 3 types of skins-

• Carousel.
• Slideshow.
• Coverflow.

Carousel of images

Slides #

Skin – Carousel

• Carousel – It is a carousel skin that showcases a customizable number of images and videos.
  • Skin: Carousel.
  • Slides: You can choose the image or video and set the custom URL to link to.
  • Effect: You can choose slide transitions – Slide, Fade, Cube.
  • Slides Per View: Set the number of slides to view at one time, maximum allowed is 10.
  • Slides to Scroll: Set the number of slides to scroll per swipe at one time, maximum allowed is 10.
  • Height: You can set the height of the carousel.
  • Width: You can set the width of the carousel.

Skin – Slideshow

• Slideshow – It is a slider skin that displays the primary slide and number of small thumbnail images.
  • Skin: Slideshow.
  • Slides: You can choose the image or video and set the custom URL to link to.
  • Effect: You can choose slide transitions – Slide, Fade, Cube.
  • Height: You can set the height of the carousel.
  • Thumbnails:
    • Slides Per View: Set the number of slides to view at one time, maximum allowed is 10.
    • Ratio: You can set the thumbnail ratio to 1:1, 4:3, 16:9, or 21:9.
    • Centered Slides: To center the slides, enable this option.

Skin – Coverflow

• Coverflow – It is a slider skin that displays the main slide in the front side and other slides in the back side.
  • Skin: Coverflow.
  • Slides: You can choose the image or video and set the custom URL to link to.
  • Slides Per View: Set the number of slides to view at one time, maximum allowed is 10.
  • Slides to Scroll: Set the number of slides to scroll per swipe at one time, maximum allowed is 10.
  • Height: You can set the height of the carousel.
  • Width: You can set the width of the carousel.

Additional Options #

• Arrows: You can choose to show or hide the navigation arrows.
• Pagination: The widget provides options to select None, Dots, Fraction, or Progress for the pagination.
• Transition Duration: You can set the time it takes for each slide to show. This time is in milliseconds, so 1000 ms = 1 second.
• Autoplay: You can choose to enable or disable the autoplay option for the carousel – Show or hide.
• Autoplay Speed: You can set the time between each slide transition. This time is in milliseconds, so 1000 ms = 1 second.
• Infinite Loop: You can choose to show the carousel in continuous loop, infinitely. Yes or No.
• Pause on Interaction: You can select whether to pause or autoplay when a user interacts with the carousel. Yes or No.
• Overlay: You can set the image overlay. None, Text, or Icon.
  • If Text is chosen:
    • Caption: You can choose which text to display as the caption – Title, Caption, or Description
  • If Icon is chosen:
    • Icon: You can choose from a search icon, plus icon, eye icon, or link icon for overlay icon.
• Animation: You can choose from Fade, Slide Up, Slide Down, Slide Right, Slide Left, Zoom In for Overlay icon or text to show.
• Image Size: You can select size of image, from Thumbnail to Full, or Custom.
• Image Fit: You can select how an image fits into its container, either Cover, Contain, or Auto.

Each slide can have an image or video linked to an external link. Carousel can be a mixture of images and videos.

Style #

Slides #

• Space between – You can set the space between the slides.
• Background color – You can set the background color for the carousel.
• Border Size: You can control the size of the border.
• Border Color: You can control the color of the border.
• Padding: Set the padding for the carousel.
• Border Radius: Set the border radius to carousel.

Navigation #

• Arrows
  • Normal/Hover State
    • Size: Control the size of the navigation arrows.
    • Color: Choose the color for the navigation arrows.
• Pagination (not available on Slideshow type)
  • Position: Position the pagination inside or outside of the carousel.
  • Size: Adjust the size of pagination.
  • Color: Choose the color of the pagination.
• Play Icon (You must have videos in the slides to see it)
  • Color: Choose the color of the video play icon.
  • Size: Adjust the size of the video play icon
• Text Shadow: Set the text shadow of the video play icon

Overlay (not available on Slideshow skin type) #

• If Text is chosen for the Overlay:
  • Background Color: Choose a background color for the overlay.
  • Text Color: Choose the color of the overlay text.
  • Typography: Change the typography options for the overlay text.
• If Icon is chosen for Overlay:
  • Background Color: Choose a background color for the overlay.
  • Text Color: Choose the color of the overlay icon.
  • Icon Size: Scale the size of the overlay icon up or down.

Lightbox #

• Color: Choose the background color for the Lightbox.
• UI Color: Choose the UI Color. This affects the arrow and dot navigations and the (X) closing icon for the Lightbox.
• UI Hover Color: Choose the UI hover color. This affects the Lightbox arrow and dot navigations and the (X) closing icon when the user hovers over each.
• Video Width: Set the width of the video for the Lightbox.