The element "slider" allows users to add&nbsp;slideshows to their&nbsp;websites.&nbsp;&nbsp;<h2 class="PlaygroundEditorTheme__h2" dir="ltr" style="text-align: start;">Add a&nbsp;slider to your website</h2>A slider can be added in the&nbsp;toolbar on the left side of the builder. Select image icon,&nbsp;drag and drop "Slider"&nbsp;to&nbsp;your website.&nbsp;&nbsp;<img src="https://help.webwave.me/lib/dkwr2z/Slider-l9fm8bui.png" alt="" width="inherit" height="inherit">&nbsp;&nbsp;<h2 class="PlaygroundEditorTheme__h2" dir="ltr" style="text-align: start;">Slider settings</h2>After clicking on the&nbsp;slider you will see "Slider settings" in the&nbsp;side panel.<img src="https://help.webwave.me/lib/dkwr2z/slider2-l9fm8e8m.png" alt="" width="inherit" height="inherit">&nbsp;<h3 class="PlaygroundEditorTheme__h3" dir="ltr" style="text-align: start;">Animation</h3>An Animation makes&nbsp;one picture turn&nbsp;into another: <ul class="PlaygroundEditorTheme__ul"><li value="1" class="PlaygroundEditorTheme__listItem">Slide&nbsp;- the&nbsp;current photo will move to the side and will be replaced by a new one.</li><li value="2" class="PlaygroundEditorTheme__listItem">Fade- the current photo will fade away and a&nbsp;new one will take its place.</li><li value="3" class="PlaygroundEditorTheme__listItem">Crossfade&nbsp;- the&nbsp;current photo will smoothly turn into a new one.</li><li value="4" class="PlaygroundEditorTheme__listItem">Explosion&nbsp;– the&nbsp;current photo will be divided into many pieces, turn into a new one and go back as an entire photo again.&nbsp;</li><li value="5" class="PlaygroundEditorTheme__listItem">Windmill&nbsp;– the current photo will be divided into four pieces&nbsp;which move in different directions and reveal a new photo.&nbsp;</li><li value="6" class="PlaygroundEditorTheme__listItem">Door– the&nbsp;current photo will be divided&nbsp;into four pieces&nbsp;which move on sides and reveal a new photo.</li><li value="7" class="PlaygroundEditorTheme__listItem">Tils&nbsp;– the&nbsp;current photo will be divided&nbsp;into four pieces&nbsp;which fall and reveal a new photo.</li></ul>&nbsp;<h3 class="PlaygroundEditorTheme__h3" dir="ltr" style="text-align: start;">Crop Style</h3>Adjust how the image fits the gallery frame:<ul class="PlaygroundEditorTheme__ul"><li value="1" class="PlaygroundEditorTheme__listItem">Fit&nbsp;- a whole photo fits the gallery frame. There might be left some empty spaces in the frame.</li><li value="2" class="PlaygroundEditorTheme__listItem">Crop&nbsp;- a photo fits the whole&nbsp;gallery frame. There are no empty spaces in the frame, but some parts of the picture might get cropped.</li><li value="3" class="PlaygroundEditorTheme__listItem">Stretch&nbsp;- a photo gets disproportionally stretched so it fits the whole frame. There are no empty spaces in the frame and no parts of the picture get cropped.</li></ul>&nbsp;<h3 class="PlaygroundEditorTheme__h3" dir="ltr" style="text-align: start;">Duration</h3>Duration shows how long&nbsp; it takes in seconds for one photo to change to another.&nbsp;<h3 class="PlaygroundEditorTheme__h3" dir="ltr" style="text-align: start;">Delay</h3>Delay shows&nbsp;time in seconds for how long&nbsp;a photo is displayed before it changes.&nbsp;<h3 class="PlaygroundEditorTheme__h3" dir="ltr" style="text-align: start;">Autoplay</h3>With this function one sets whether photos should change automatically or after a click.&nbsp;&nbsp;<h3 class="PlaygroundEditorTheme__h3" dir="ltr" style="text-align: start;">Additional settings</h3>There are some additional settings in the Slider settings section: <ul class="PlaygroundEditorTheme__ul"><li value="1" class="PlaygroundEditorTheme__listItem">Title and description&nbsp;- should &nbsp;title and description of a photo be displayed.</li><li value="2" class="PlaygroundEditorTheme__listItem">Thumbnails&nbsp;- should photos' thumbnails be displayed and where should they.</li><li value="3" class="PlaygroundEditorTheme__listItem">Arrows&nbsp;- should navigation arrows&nbsp;allowing the&nbsp;user to move around gallery be displayed.</li><li value="4" class="PlaygroundEditorTheme__listItem">Distance from the&nbsp;edge&nbsp;- sets arrows' distance from gallery edges.</li></ul>&nbsp;&nbsp;<h2 class="PlaygroundEditorTheme__h2" dir="ltr" style="text-align: start;">Edit your Slider</h2>In order to edit the&nbsp;slider, click on it and select "Edit content".<h3 class="PlaygroundEditorTheme__h3" style="text-align: start;">&nbsp;</h3><h3 class="PlaygroundEditorTheme__h3" dir="ltr" style="text-align: start;">Add a&nbsp;photo to a&nbsp;slider</h3>Select "<a href="https://help.sitedu.de/articles/the-site-dude-media-library-f0a2d0-824dc" rel="noreferrer" class="PlaygroundEditorTheme__link">Media library</a>" at the top of a new window or add a new on from your local storage drive.&nbsp;<img src="https://help.webwave.me/lib/dkwr2z/slider4-l9fmc63u.png" alt="" width="inherit" height="inherit">&nbsp;Choose photos and press "Add to slider".&nbsp;<h3 class="PlaygroundEditorTheme__h3" dir="ltr" style="text-align: start;">Remove a photo&nbsp;from a&nbsp;slider</h3>In order to remove photos from the&nbsp;slider, in the edition window choose a photo which needs to be deleted and select "Remove from slider".&nbsp;&nbsp;<img src="https://help.webwave.me/lib/dkwr2z/slider3-l9fm8b6b.png" alt="" width="inherit" height="inherit">&nbsp;<h3 class="PlaygroundEditorTheme__h3" dir="ltr" style="text-align: start;">Click action (link)</h3>In order to change a link to your&nbsp;website&nbsp;to which users will be transferred after clicking on a photo on the&nbsp;slider, select slider and choose from the&nbsp;side edition panel "Click action". To set a link for another photo, just change an image by clicking on a navigation&nbsp;arrow on the slider.

Learn about the Slider Element of the SiteDu.de builder

The element "slider" allows users to add slideshows to their websites.

## Add a slider to your website

A slider can be added in the toolbar on the left side of the builder. Select image icon, drag and drop "Slider" to your website.

![](https://help.webwave.me/lib/dkwr2z/Slider-l9fm8bui.png)

## Slider settings

After clicking on the slider you will see "Slider settings" in the side panel.

![](https://help.webwave.me/lib/dkwr2z/slider2-l9fm8e8m.png)

### Animation

An Animation makes one picture turn into another:

* ****Slide**** - the current photo will move to the side and will be replaced by a new one.
* ****Fade****\- the current photo will fade away and a new one will take its place.
* ****Crossfade**** - the current photo will smoothly turn into a new one.
* ****Explosion**** – the current photo will be divided into many pieces, turn into a new one and go back as an entire photo again.
* ****Windmill**** – the current photo will be divided into four pieces which move in different directions and reveal a new photo.
* ****Door****– the current photo will be divided into four pieces which move on sides and reveal a new photo.
* ****Tils****– the current photo will be divided into four pieces which fall and reveal a new photo.

### Crop Style

Adjust how the image fits the gallery frame:

* ****Fit**** - a whole photo fits the gallery frame. There might be left some empty spaces in the frame.
* ****Crop**** - a photo fits the whole gallery frame. There are no empty spaces in the frame, but some parts of the picture might get cropped.
* ****Stretch**** - a photo gets disproportionally stretched so it fits the whole frame. There are no empty spaces in the frame and no parts of the picture get cropped.

### Duration

Duration shows how long it takes in seconds for one photo to change to another.

### Delay

Delay shows time in seconds for how long a photo is displayed before it changes.

### Autoplay

With this function one sets whether photos should change automatically or after a click.

### Additional settings

There are some additional settings in the Slider settings section:

* ****Title and description**** - should title and description of a photo be displayed.
* ****Thumbnails**** - should photos' thumbnails be displayed and where should they.
* ****Arrows****\- should navigation arrows allowing the user to move around gallery be displayed.
* ****Distance from the edge**** - sets arrows' distance from gallery edges.

## Edit your Slider

In order to edit the slider, click on it and select "Edit content".

### Add a photo to a slider

Select "[Media library](https://help.sitedu.de/articles/the-site-dude-media-library-f0a2d0-824dc)" at the top of a new window or add a new on from your local storage drive.

![](https://help.webwave.me/lib/dkwr2z/slider4-l9fmc63u.png)

Choose photos and press "Add to slider".

### Remove a photo from a slider

In order to remove photos from the slider, in the edition window choose a photo which needs to be deleted and select "Remove from slider".

![](https://help.webwave.me/lib/dkwr2z/slider3-l9fm8b6b.png)

### Click action (link)

In order to change a link to your website to which users will be transferred after clicking on a photo on the slider, select slider and choose from the side edition panel "Click action". To set a link for another photo, just change an image by clicking on a navigation arrow on the slider.

The Slider Element

Got a builder package? Learn how to use it and how to edit your content

Was this article helpful?