Media Carousel

The Media Carousel widget allows you to create a slider of videos and images.

View Live Demo

Content Tab

Slides

• Skin: Choose the display style of the carousel (Carousel, Slideshow, Coverflow).
• Slides: Manage the media items in the carousel.
  • Click the '+' button to add new items.
  • Use the 'Type' dropdown to choose the media type (Image, Video, etc.).
  • Set a 'Link' if you want the media to be clickable.
• Effect: Select the transition effect between slides (Slide, Fade, Cube).
• Slides Per View: Set the number of slides visible at one time.
• Slides to Scroll: Decide how many slides the carousel moves per action.
• Height: Adjust the height of the carousel.
• Width: Set the width of the carousel in percentage relative to its container.

Additional Options

• Arrows: Show or hide navigation arrows.
• Pagination: Choose the pagination style (Dots, Fraction, Progress).
• Transition Duration: Set the duration of the transition between slides.
• Autoplay: Toggle autoplay functionality.
• Autoplay Speed: Set the speed of autoplay in milliseconds.
• Infinite Loop: Enable or disable infinite looping of slides.
• Pause on Hover: Choose whether autoplay pauses when the mouse hovers over the carousel.
• Pause on Interaction: Decide if autoplay pauses when the carousel is interacted with.
• Overlay: Choose an overlay style for the slides.
• Image Resolution: Select the resolution of images in the carousel.
• Image Fit: Determine how images fit into the slide (e.g., Cover, Contain).
• Lazyload: Enable or disable lazy loading of images.
• Overflow Visible: Set whether the overflow of the carousel is visible.

Style Tab

Slides

• Space Between: Adjust the space between individual slides.
• Background Color: Set the background color for the slides.
• Border Size: Specify the size of the border around the slides.
• Border Radius: Set the radius for slide corners to create rounded edges.
• Border Color: Choose the color of the border.
• Padding: Adjust the padding inside the slides.
• Box Shadow: Apply a shadow effect to the slides.

Navigation

• Arrows:
  • Right Arrow: Customize the appearance of the right arrow.
  • Left Arrow: Customize the appearance of the left arrow.
  • Vertical Offset: Adjust the vertical position of the arrows.
  • Horizontal Offset: Adjust the horizontal position of the arrows.
  • Size: Set the size of the navigation arrows.
  • Color: Choose a color for the arrows.
  • Shadow: Add a shadow effect to the arrows.
• Pagination:
  • Position: Set the position of the pagination (Inside, Outside).
  • Size: Adjust the size of the pagination dots or bars.
  • Gap: Set the space between pagination dots or bars.
  • Color: Choose a color for the pagination elements.
  • Active Color: Select a color for the active pagination element.
• Play Icon: (if applicable)
  • Color: Set the color of the play icon.
  • Size: Adjust the size of the play icon.
  • Shadow: Apply a shadow effect to the play icon.

Lightbox

• Color: Set the background color of the lightbox.
• UI Color: Choose the color for the lightbox user interface elements.
• UI Hover Color: Select the hover color for the UI elements.
• Video Width: Adjust the width of videos within the lightbox.