Using an image carousel can bring many benefits to a website. First of all, it makes better use of the space on the site, allowing you to present more content. In addition, a carousel of images can increase user engagement and get users to interact with the content or products presented.<h2 class="PlaygroundEditorTheme__h2" dir="ltr" style="text-align: start;"> Adding a carousel of images to your site</h2> 1. Go to edit your page.2. Carousels can be added from the toolbar on the left side of the editor. Just click the appropriate icon or drag it into the workspace. &nbsp;<img src="https://help.webwave.me/lib/dkwr2z/2023-10-11_15-13-lnlrv0k9.png" alt="" width="inherit" height="inherit"> &nbsp;<h2 class="PlaygroundEditorTheme__h2" dir="ltr" style="text-align: start;">Carousel settings</h2> After selecting a carousel, the side editing panel will show the settings you can change. Go to&nbsp;"<a href="https://help.sitedu.de/articles/settings-panel-f0a2d0-bbd6c" rel="noreferrer" class="PlaygroundEditorTheme__link">Settings Panel</a>", then go to&nbsp;"Carousel Settings". <img src="https://help.webwave.me/lib/dkwr2z/2024-02-15_14-50-lsna3rub.png" alt="" width="inherit" height="inherit"> 1.&nbsp;Space betwen slides-&nbsp;set the interval between successive pictures in the carousel. 2. Slides per view&nbsp;- set how many slides to display in one panel. 3.&nbsp;Slides Crop Type&nbsp;- define the fit of your carousel images, we have 4 fit functions to choose from:Crop&nbsp;- trims the images to fit the displayed carousel. Contain&nbsp;- option allows you to adjust the images to fit the height and width of the carousel. Stretch&nbsp;- Stretches images to fit the dimensions of a single photo.&nbsp; Original size&nbsp;- Adds the orginal dimension of the photo to the carousel to adjust to the dimension of a single photo.&nbsp; 4.&nbsp;Slides per group&nbsp;- define every how many photos the carousel should scroll during one beat. 5.&nbsp;Animation transition during&nbsp;- how long it takes for one panel to change into another (how long the animation lasts). Time given in seconds 6. Animation delay&nbsp;- how long it takes to stop one panel before moving to the next panel. Time given in seconds 7. Easing function&nbsp;- in our websiet builder&nbsp;we have 6 easing functions:Swing&nbsp;- The movement of the object progresses evenly in time. There is no acceleration or deceleration, this function gives the impression of smoothness. Linear&nbsp;- The movement of the object proceeds evenly in time. There are no accelerations or decelerations, this function gives the impression of mechanical motion.&nbsp; Ease&nbsp;- this is a function that introduces a gentle acceleration and deceleration at the beginning and end of the animation. In the middle of the animation, the object moves evenly. This creates a more natural feel and is often used in animations. Ease-in&nbsp;- Starts with a slower movement and speeds up as the animation progresses. Often used when you want an object to slowly "move" at the beginning of an animation.Ease-out - Starts with a faster movement and slows down as time passes. It is useful when you want the object to slow down and stop smoothly. Ease-in-out&nbsp;- This is a combination of Ease-In and Ease-Out. At the beginning and end of the animation, the object moves slower, and in the middle part, the movement is even.This is a very popular feature that creates smooth and natural transitions between states.8. Stop animations after hovering - this function allows you to stop the scrolling of panels after hovering on carousels. 8. Stop animations on mouse enter&nbsp;- this function allows you to stop the scrolling of panels after hovering on carousels.9. Image commpresion&nbsp;-&nbsp;disabling this feature will make your images full resolution10. Pagination&nbsp;- show or hide the paging of the carousel located in the center of the carousel at the bottom border of the carousel.&nbsp;11.&nbsp;Navigation&nbsp;- Show or hide arrows located on the left and right side of the carousel, allow you to manually move between panels:<ul class="PlaygroundEditorTheme__ul"><li value="1" class="PlaygroundEditorTheme__listItem">11.1.&nbsp;Next and Previous&nbsp;- change the icons used to manually move between panels.</li><li value="2" class="PlaygroundEditorTheme__listItem">11.2. Navigation spacing&nbsp;- define the spacing of the control icons from the left and right edges.</li></ul>&nbsp;<h2 class="PlaygroundEditorTheme__h2" dir="ltr" style="text-align: start;">Edit an Image</h2>Select the <a href="https://help.sitedu.de/articles/images-f0a2d0-44b4a" rel="noreferrer" class="PlaygroundEditorTheme__link">image </a>you want to edit, then go to&nbsp;"Settings panel". <img src="https://help.webwave.me/lib/dkwr2z/2023-09-27_15-20-ln1ryq3z.png" alt="" width="inherit" height="inherit"> &nbsp;1.&nbsp;Select "Edit: Image"2.&nbsp;Change the height of the images(height of all images in the carousel)&nbsp;- the height of the entire carousel will change to match the width of the images3.&nbsp;Crop image&nbsp;- crop the selected image to display according to your preference.4.&nbsp;Custom image crop type&nbsp;- change the adjustment options of the selected image in your carousel.5.&nbsp;Click action (link)&nbsp;- In this tab, you can specify what action you want to happen when you click the button. The following actions are available:<ul class="PlaygroundEditorTheme__ul"><li value="1" class="PlaygroundEditorTheme__listItem">Go to a page&nbsp;- The indicated sub-page of the site will be opened.</li><li value="2" class="PlaygroundEditorTheme__listItem">Go to an article&nbsp;- The indicated article will be opened.</li><li value="3" class="PlaygroundEditorTheme__listItem">Scroll page to selected object&nbsp;- The page will be dynamically scrolled to show the selected object on the page.</li><li value="4" class="PlaygroundEditorTheme__listItem">Other:&nbsp;</li><li value="5" class="PlaygroundEditorTheme__listItem PlaygroundEditorTheme__nestedListItem"><ul class="PlaygroundEditorTheme__ul"><li value="1" class="PlaygroundEditorTheme__listItem">Go to URL address&nbsp;- A page with the indicated URL will open.</li><li value="2" class="PlaygroundEditorTheme__listItem">Send e-mail&nbsp;- When you click the button, the default mail application, e.g. Mail (Windows 10) will be launched on your computer and on your phone, e.g. Gmail. In both cases, the email address provided will automatically be entered into the application.</li><li value="3" class="PlaygroundEditorTheme__listItem">Call phone number&nbsp;- When you click the button on the computer, the default call application will be launched, e.g. Skype and on the phone, e.g. dialer. In both cases, the number provided will automatically be entered into the application.</li><li value="4" class="PlaygroundEditorTheme__listItem">Open a file from the media library&nbsp;- When you click the button, it will open&nbsp;the selected file.</li><li value="5" class="PlaygroundEditorTheme__listItem">Show or hide object&nbsp;- The indicated items will perform the interaction assigned to them. What interactions are and how to use them can be read in this tutorial.</li></ul></li></ul>6.&nbsp;Style&nbsp;- Change the appearance of all images in the carousel. <a href="https://help.sitedu.de/articles/how-to-style-an-element-f0a2d0-eb58e" rel="noreferrer" class="PlaygroundEditorTheme__link">In this article, you can find more information on how to style an element.</a>

Learn what a carousel is and how to use the carousel element in the SiteDu.de builder

Using an image carousel can bring many benefits to a website. First of all, it makes better use of the space on the site, allowing you to present more content. In addition, a carousel of images can increase user engagement and get users to interact with the content or products presented.

## Adding a carousel of images to your site

1\. Go to edit your page.

2\. Carousels can be added from the toolbar on the left side of the editor. Just click the appropriate icon or drag it into the workspace.

![](https://help.webwave.me/lib/dkwr2z/2023-10-11_15-13-lnlrv0k9.png)

## Carousel settings

After selecting a carousel, the side editing panel will show the settings you can change.

Go to****"****[****Settings Panel****](https://help.sitedu.de/articles/settings-panel-f0a2d0-bbd6c)****"****, then go to****"Carousel Settings"****.  
  
![](https://help.webwave.me/lib/dkwr2z/2024-02-15_14-50-lsna3rub.png)

****1.**** ****Space betwen slides-**** set the interval between successive pictures in the carousel.  
****2\. Slides per view**** - set how many slides to display in one panel.  
****3.**** ****Slides Crop Type**** - define the fit of your carousel images, we have 4 fit functions to choose from:

*****Crop*****\- trims the images to fit the displayed carousel.  
*****Contain*****\- option allows you to adjust the images to fit the height and width of the carousel.  
*****Stretch***** - Stretches images to fit the dimensions of a single photo.  
*****Original size***** - Adds the orginal dimension of the photo to the carousel to adjust to the dimension of a single photo.  
****4.**** ****Slides per group****\- define every how many photos the carousel should scroll during one beat.  
****5.**** ****Animation transition during**** - how long it takes for one panel to change into another (how long the animation lasts). Time given in seconds  
****6\. Animation delay**** - how long it takes to stop one panel before moving to the next panel. Time given in seconds  
****7\. Easing function**** - in our websiet builder we have 6 easing functions:

****Swing**** - The movement of the object progresses evenly in time. There is no acceleration or deceleration, this function gives the impression of smoothness.  
****Linear****\- The movement of the object proceeds evenly in time. There are no accelerations or decelerations, this function gives the impression of mechanical motion.  
****Ease**** - this is a function that introduces a gentle acceleration and deceleration at the beginning and end of the animation. In the middle of the animation, the object moves evenly. This creates a more natural feel and is often used in animations.  
****Ease-in**** - Starts with a slower movement and speeds up as the animation progresses. Often used when you want an object to slowly "move" at the beginning of an animation.Ease-out - Starts with a faster movement and slows down as time passes. It is useful when you want the object to slow down and stop smoothly.  
****Ease-in-out**** - This is a combination of Ease-In and Ease-Out. At the beginning and end of the animation, the object moves slower, and in the middle part, the movement is even.This is a very popular feature that creates smooth and natural transitions between states.8. Stop animations after hovering - this function allows you to stop the scrolling of panels after hovering on carousels.  
  
****8\. Stop animations on mouse enter**** - this function allows you to stop the scrolling of panels after hovering on carousels.

****9\. Image commpresion**** - disabling this feature will make your images full resolution

****10\. Pagination**** - show or hide the paging of the carousel located in the center of the carousel at the bottom border of the carousel.

****11\. Navigation**** - Show or hide arrows located on the left and right side of the carousel, allow you to manually move between panels:

* ****11.1.**** ****Next and Previous**** - change the icons used to manually move between panels.
* ****11.2. Navigation spacing**** - define the spacing of the control icons from the left and right edges.

## Edit an Image

Select the[image](https://help.sitedu.de/articles/images-f0a2d0-44b4a)you want to edit, then go to****"Settings panel"****.

![](https://help.webwave.me/lib/dkwr2z/2023-09-27_15-20-ln1ryq3z.png)

1\.****Select "Edit: Image"****

2\.****Change the height of the images(height of all images in the carousel)**** - the height of the entire carousel will change to match the width of the images

3.****Crop image**** - crop the selected image to display according to your preference.

4\.****Custom image crop type**** - change the adjustment options of the selected image in your carousel.

5\.****Click action (link)**** - In this tab, you can specify what action you want to happen when you click the button. The following actions are available:

* ****Go to a page**** - The indicated sub-page of the site will be opened.
* ****Go to an article**** - The indicated article will be opened.
* ****Scroll page to selected object**** - The page will be dynamically scrolled to show the selected object on the page.
* ****Other:****
* * ****Go to URL address**** - A page with the indicated URL will open.
  * ****Send e-mail****\- When you click the button, the default mail application, e.g. Mail (Windows 10) will be launched on your computer and on your phone, e.g. Gmail. In both cases, the email address provided will automatically be entered into the application.
  * ****Call phone number**** - When you click the button on the computer, the default call application will be launched, e.g. Skype and on the phone, e.g. dialer. In both cases, the number provided will automatically be entered into the application.
  * ****Open a file from the media library**** - When you click the button, it will open the selected file.
  * ****Show or hide object**** - The indicated items will perform the interaction assigned to them. What interactions are and how to use them can be read in this tutorial.

6\.****Style**** - Change the appearance of all images in the carousel.[****In this article, you can find more information on how to style an element.****](https://help.sitedu.de/articles/how-to-style-an-element-f0a2d0-eb58e)

Using an image carousel can bring many benefits to a website. First of all, it makes better use of the space on the site, allowing you to present more content. In addition, a carousel of images can increase user engagement and get users to interact with the content or products presented.<h2 class="PlaygroundEditorTheme__h2" dir="ltr" style="text-align: start;"> Adding a carousel of images to your site</h2> 1. Go to edit your page.2. Carousels can be added from the toolbar on the left side of the editor. Just click the appropriate icon or drag it into the workspace. &nbsp;<img src="https://help.webwave.me/lib/dkwr2z/2023-10-11_15-13-lnlrv0k9.png" alt="" width="inherit" height="inherit"> &nbsp;<h2 class="PlaygroundEditorTheme__h2" dir="ltr" style="text-align: start;">Carousel settings</h2> After selecting a carousel, the side editing panel will show the settings you can change. Go to&nbsp;"<a href="https://help.sitedu.de/articles/settings-panel-f0a2d0-bbd6c" rel="noreferrer" class="PlaygroundEditorTheme__link">Settings Panel</a>", then go to&nbsp;"Carousel Settings". <img src="https://help.webwave.me/lib/dkwr2z/2024-02-15_14-50-lsna3rub.png" alt="" width="inherit" height="inherit"> 1.&nbsp;Space betwen slides-&nbsp;set the interval between successive pictures in the carousel. 2. Slides per view&nbsp;- set how many slides to display in one panel. 3.&nbsp;Slides Crop Type&nbsp;- define the fit of your carousel images, we have 4 fit functions to choose from:Crop&nbsp;- trims the images to fit the displayed carousel. Contain&nbsp;- option allows you to adjust the images to fit the height and width of the carousel. Stretch&nbsp;- Stretches images to fit the dimensions of a single photo.&nbsp; Original size&nbsp;- Adds the orginal dimension of the photo to the carousel to adjust to the dimension of a single photo.&nbsp; 4.&nbsp;Slides per group&nbsp;- define every how many photos the carousel should scroll during one beat. 5.&nbsp;Animation transition during&nbsp;- how long it takes for one panel to change into another (how long the animation lasts). Time given in seconds 6. Animation delay&nbsp;- how long it takes to stop one panel before moving to the next panel. Time given in seconds 7. Easing function&nbsp;- in our websiet builder&nbsp;we have 6 easing functions:Swing&nbsp;- The movement of the object progresses evenly in time. There is no acceleration or deceleration, this function gives the impression of smoothness. Linear&nbsp;- The movement of the object proceeds evenly in time. There are no accelerations or decelerations, this function gives the impression of mechanical motion.&nbsp; Ease&nbsp;- this is a function that introduces a gentle acceleration and deceleration at the beginning and end of the animation. In the middle of the animation, the object moves evenly. This creates a more natural feel and is often used in animations. Ease-in&nbsp;- Starts with a slower movement and speeds up as the animation progresses. Often used when you want an object to slowly "move" at the beginning of an animation.Ease-out - Starts with a faster movement and slows down as time passes. It is useful when you want the object to slow down and stop smoothly. Ease-in-out&nbsp;- This is a combination of Ease-In and Ease-Out. At the beginning and end of the animation, the object moves slower, and in the middle part, the movement is even.This is a very popular feature that creates smooth and natural transitions between states.8. Stop animations after hovering - this function allows you to stop the scrolling of panels after hovering on carousels. 8. Stop animations on mouse enter&nbsp;- this function allows you to stop the scrolling of panels after hovering on carousels.9. Image commpresion&nbsp;-&nbsp;disabling this feature will make your images full resolution10. Pagination&nbsp;- show or hide the paging of the carousel located in the center of the carousel at the bottom border of the carousel.&nbsp;11.&nbsp;Navigation&nbsp;- Show or hide arrows located on the left and right side of the carousel, allow you to manually move between panels:<ul class="PlaygroundEditorTheme__ul"><li value="1" class="PlaygroundEditorTheme__listItem">11.1.&nbsp;Next and Previous&nbsp;- change the icons used to manually move between panels.</li><li value="2" class="PlaygroundEditorTheme__listItem">11.2. Navigation spacing&nbsp;- define the spacing of the control icons from the left and right edges.</li></ul>&nbsp;<h2 class="PlaygroundEditorTheme__h2" dir="ltr" style="text-align: start;">Edit an Image</h2>Select the <a href="https://help.sitedu.de/articles/images-f0a2d0-44b4a" rel="noreferrer" class="PlaygroundEditorTheme__link">image </a>you want to edit, then go to&nbsp;"Settings panel". <img src="https://help.webwave.me/lib/dkwr2z/2023-09-27_15-20-ln1ryq3z.png" alt="" width="inherit" height="inherit"> &nbsp;1.&nbsp;Select "Edit: Image"2.&nbsp;Change the height of the images(height of all images in the carousel)&nbsp;- the height of the entire carousel will change to match the width of the images3.&nbsp;Crop image&nbsp;- crop the selected image to display according to your preference.4.&nbsp;Custom image crop type&nbsp;- change the adjustment options of the selected image in your carousel.5.&nbsp;Click action (link)&nbsp;- In this tab, you can specify what action you want to happen when you click the button. The following actions are available:<ul class="PlaygroundEditorTheme__ul"><li value="1" class="PlaygroundEditorTheme__listItem">Go to a page&nbsp;- The indicated sub-page of the site will be opened.</li><li value="2" class="PlaygroundEditorTheme__listItem">Go to an article&nbsp;- The indicated article will be opened.</li><li value="3" class="PlaygroundEditorTheme__listItem">Scroll page to selected object&nbsp;- The page will be dynamically scrolled to show the selected object on the page.</li><li value="4" class="PlaygroundEditorTheme__listItem">Other:&nbsp;</li><li value="5" class="PlaygroundEditorTheme__listItem PlaygroundEditorTheme__nestedListItem"><ul class="PlaygroundEditorTheme__ul"><li value="1" class="PlaygroundEditorTheme__listItem">Go to URL address&nbsp;- A page with the indicated URL will open.</li><li value="2" class="PlaygroundEditorTheme__listItem">Send e-mail&nbsp;- When you click the button, the default mail application, e.g. Mail (Windows 10) will be launched on your computer and on your phone, e.g. Gmail. In both cases, the email address provided will automatically be entered into the application.</li><li value="3" class="PlaygroundEditorTheme__listItem">Call phone number&nbsp;- When you click the button on the computer, the default call application will be launched, e.g. Skype and on the phone, e.g. dialer. In both cases, the number provided will automatically be entered into the application.</li><li value="4" class="PlaygroundEditorTheme__listItem">Open a file from the media library&nbsp;- When you click the button, it will open&nbsp;the selected file.</li><li value="5" class="PlaygroundEditorTheme__listItem">Show or hide object&nbsp;- The indicated items will perform the interaction assigned to them. What interactions are and how to use them can be read in this tutorial.</li></ul></li></ul>6.&nbsp;Style&nbsp;- Change the appearance of all images in the carousel more information&nbsp;<a href="https://help.webwave.me/change-an-element%27s-style---description-of-styling-features-in-webwave" target="_self" class="PlaygroundEditorTheme__link">[Link].</a>

The Carousel element

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

Was this article helpful?