Media Carousel widget

1. Add the Media Carousel widget to the canvas. For details, see Add elements to a page.
2. In the Content tab, under the Slides section, choose Skin from the drop-down options. The widget includes three skin types: Carousel, Slideshow, and Coverflow.
   
   1. By default, the media carousel widget comes with five slides: Item #1, Item #2, Item 3, Item #4 and Item #5. You can add or delete these slides.
      
   2. To delete the default slide, click the icon.
      
   3. There are two ways to add a new slide:
      1. Click + Add Item.
         
      2. Click the icon next to one of the existing tabs. This will create an exact copy of the existing tab.
         

Carousel Skin Settings

Carousel skin displays a rotating carousel that can display a set number of images or videos simultaneously.

1. In the Skin field, from the drop-down menu, select Carousel.
   
   
2. In the Slides section, click the first slide labeled Item #1. Clicking the menu item in the panel opens up several options.
   
3. Use the Type field to choose your media type: Image or Video.
   
   
   1. To add a image to the carousel, click the  icon.
      
   2. Use the Link option to link images to their respective Media Files, add Custom URLs, or choose None.
      

      If you’re adding a Custom URL:

      1. Click the ⚙️ to set the link to either open in a new window or to add rel=nofollow to the link.
      2. Use the Custom Attributes option to assign custom attributes to the link element. Use the | (pipe) for key-value separation and commas to separate pairs.
         
4. To add a video to the carousel, click the icon and paste the video link into the Video Link field.
   
   Note: The lightbox feature is enabled by default for the video content. You can switch it off by going to its settings and unchecking the checkbox. Learn more about Lightbox.
5. In the Effect field, choose between Slide, Fade, or Cube for the transition effect.
   
6. Use the Slides Per View field to specify how many slides will appear at once in the carousel, from 1 to 10.
   
7. In the Slides to Scroll field, define the number of slides to move during each interaction (up to 10).
   
8. In the Height field, adjust the slider to set the height of the carousel.
   
9. In the Width field, use the slider to define the width of the carousel.
   

Slideshow Skin Settings

Slideshow skin displays a slider that presents a primary slide with smaller image thumbnails below it. This style is similar to a carousel but without pagination.

1. In the Skin field, from the drop-down menu, select Slideshow.
   

2. To add content, follow the same steps we used for the carousel settings.
3. In the Effect field, choose between Slide, Fade, or Cube for the transition effect.
   
4. In the Height field, adjust the slider to set the height of the slideshow.
   
5. Under the Thumbnail section, use the Slides Per View field to specify how many slides will appear at once in the slideshow, from 1 to 10.
   
6. In the Ratio field to select the aspect ratio – options include 1:1, 4:3, 16:9, or 21:9.
   
7. Enable the Centered Slides toggle to position the currently displayed slide in the center of the slideshow view.

   

Coverflow Skin Settings

Coverflow skin displays a slider with a prominent central slide flanked by two adjacent slides.

1. In the Skin field, from the drop-down menu, select Coverflow.
   
   

2. To add content, repeat the same steps we used for the carousel settings.

3. In the Height field, adjust the slider to set the height of the carousel.
   
4. In the Width field, use the slider to define the width of the carousel.