Vev Help Center
Search…
Slideshow
Present a series of images in a pre-arranged sequence.

Configuration Options

Parameter
Type
Description
Images
Image file
Add and arrange the sequence of your slideshow images.
Transition Animation
Dropdown
The animation used to transition between the sequence of images when the slideshow is playing.
Hide dots
Toggle field
Optionally show or hide the navigation dots from the slideshow layout.
Hide arrows
Toggle field
Optional show or hide the previous/next arrows from the slideshow layout.
Add timer
Toggle field
Turns on autoplay - automatically skip to the next slide in the slideshow after a specified interval.
Time in seconds
Number
The interval used to control the speed of the slideshow when autoplay is activated (Add timer option is turned on).

Add Images to the Slideshow

In the element's settings, under the Images tab, click the "+" button. This will open the image library from where you can select the images to add into your slideshow.

Transition Animation

When the next image in the slideshow enters the display, and the currently visible image leaves, an animation will play to make this transition smooth. The type of animation used in this transition can be set in the element's settings, under the "Transition" tab. Click the "Animations" dropdown to choose an animation style.

Autoplay

In the element's settings, under the "Settings" tab, enabling the "Timer" option will instruct the slideshow to play automatically. When the "Timer" option is enabled, the "Time in seconds" field will appear. This time value indicates how long the slideshow will pause on each image before automatically progressing to the next image in the sequence. When autoplay is enabled, clicking the navigation dots or the previous/next arrow buttons will still continue to work.

Hide Controls

The navigation dots and the navigation arrows can optionally be hidden from the slideshow. This can be done from the "Settings" tab in the element's settings modal.

Styling Options

Arrow button color

Set the arrow button color using the Editor Styles Panel, under Background > Arrows and use the color picker.

Arrow icon color

Set the color of the arrow icon using the Editor Styles Panel, under Text > Arrows and use the color picker.

Arrow button size

Set the size of the arrow button using the Editor Styles Panel, under Text > Arrows and modify the numeric value in the size field.

Arrow button border

Set the border of the arrow button using the Editor Styles Panel under Border > Arrows. The border input accepts a color value for the color of the border, as well as four numeric inputs which correspond to thetop, right, bottom and left border thickness.

Custom icon

Upload your own icons for the left and right buttons using the Editor Styles Panel, under Shapes. Click the Set shape or the Set Image button to set an SVG or image asset, respectively, in place of the default left and right arrow icons.
Set the navigation background color using the Editor Styles Panel, under Background > Navigation and use the color picker.
Set the border of the navigation container using the Editor Styles Panel under Border > Navigation. The border input accepts a color value for the color of the border, as well as four numeric inputs which correspond to thetop, right, bottom and left border thickness.
The margin property nudges the position of the object relative to its initial position. The numeric inputs of the margin property correspond to the top, right, bottom, and left margins.
Last modified 2mo ago