Using the Slideshow element

Feature a slideshow gallery of all your chosen images

Diego Muralles avatar
Written by Diego Muralles
Updated over a week ago

The image slideshow is a great invention made to showcase more image assets on your page without taking up additional real estate.

Adding a Slideshow in Vev

Adding a slideshow

As an Element

  • From the top menu bar, click on the Add Menu (Shortcut: M)

  • Search for and select Slideshow

  • Click and drag the element onto your canvas

As a Section

  • From the top menu bar, click on the Add Menu (Shortcut: M)

  • In Sections, search for and select Slideshow

  • Select Slideshow then press Alt (windows) or Option (Mac)

  • Insert the section by clicking Add section here

Uploading an Image

  • Double-click the slideshow

  • Click the Add icon (+)

  • Select Add image or choose an image from one of our free stock images libraries

Styling a slideshow

  • Spacing top: Add padding to the top of the Slideshow section in pixels or % to keep spacing between sections

  • Spacing bottom: Add padding to the bottom of the Slideshow section in pixels or % to keep spacing between sections

  • Width: The width of a Slideshow section can't be altered, it'll always be set to cover the 100%

  • Height: Set the height of the Slideshow section in Pixels, % or set it to Auto so that it grows as you add content to it

  • Min H: Sets the minimum amount of height pixels a Slideshow section can be. A red stippled horizontal line inside your section will reflect the minimum height

  • Clip content: Toggle to hide the content that goes beyond the section's edges

  • Resize to fill vertically: Click to set the section's height to 100%

  • Background:

    • Arrows: Change the arrow's background-color

    • NA: Change the background color of the navigation buttons

    • Selected NavBTN: Change the background color of the active navigation button

    • Hover NavBTN: Change the background color of the navigation button on hover

  • Text: Change the arrows' size and color

  • Margin: Add margin to both arrows and navigation buttons

  • Padding: Add padding to both arrows and navigation buttons

  • Border: Set a border color, opacity, and line weight for both arrows and navigation buttons

  • Border Radius: Curve the radius of the border of both arrows and navigation buttons

  • Effects: Add different types of shadows or blur effects to both the container and the navigation buttons

  • Opacity: Set the opacity for the container, arrows, and navigation buttons

  • Icons:

    • Set custom shape: Replace the arrow icon with a shape or a custom SVG

    • Set custom image: Replace the arrow icon logo with an image

Configuration Options

Once you've added the Slideshow to your canvas, it's time to upload your image assets and adjust the configurations.
โ€‹
To start, double-click the element to open the configuration options.

Parameter

Description

Images

Add and arrange the sequence of your slideshow images.

Transition Animation

The animation used to transition between the sequence of images when the slideshow is playing.

Hide dots

Optionally show or hide the navigation dots from the slideshow layout.

Hide arrows

Optional show or hide the previous/next arrows from the slideshow layout.

Add timer

Turns on autoplay - automatically skip to the next slide in the slideshow after a specified interval.

Time in seconds

The interval used to control the speed of the slideshow when autoplay is activated (when the add timer option is turned on).

Did this answer your question?