How to create a slider
A slider, also known as a carousel, is a dynamic element on a website that allows for the presentation of various content such as images, text, or videos in a limited area. You can think of a slider as a slideshow that is integrated directly into your website. The content either changes automatically or can be manually controlled by your visitors using navigation arrows or dots. This type of presentation allows you to ensure that important content or offers are brought into focus one after another. In this guide, you will learn how to create, manage, and configure a slider in the ChurchDesk editor.
In the website editor, there are two functions that, at first glance, appear similar: a Slideshow and a Slider.
- The Slideshow is intended for the automatic display of dynamic content, such as news or upcoming events. You can find more on this in this article.
- The Slider, on the other hand, is a tool for custom-designed content, where you can manually create each individual slide as its own row with specific text, images, and modules.
On this page:
Creating a slider
This is how you create a slider; a slider is always created from an existing row.
- Hover the mouse over the row,
- click on "Row",
- click on More (three dots),
- select "Add Slider".
Managing a slider
1. Adding new slides
- Hover the mouse over the row,
- click on "Slider",
- click on More (three dots),
- select "Add Slide".
2. Duplicating/removing new slides
- Hover the mouse over the row,
- click on "Slider",
- click on More (three dots),
- select "Slide",
- select the specific slide,
- hover the mouse over the row again,
- click on "Row",
- click on the "Duplicate" or "Remove" icon.
3. Editing individual slides
- Hover the mouse over the row,
- click on "Slider",
- click on More (three dots),
- select "Slide",
- select the specific slide.
4. Hiding a slider on individual devices
- Hover the mouse over the row,
- click on "Slider",
- click on More (three dots),
- select "Show on device",
- check the box.
Slider Settings
You can access the slider's settings in two ways:
- Hover the mouse over the row -> click on "Slider" -> click on the pencil icon to edit
- Hover the mouse over the row -> click on "Slider" -> click on More (three dots) -> select "Edit Slider"
In this area, you define the behavior and functions of the slider.
1. Local Design
- Background: Set the background color or an image for the slider row. This setting will be overwritten if you set a separate background for an individual row within the slider.
- Arrows: Customize the color, size, width, and height of the navigation arrows.
- Pagination dots: Design the width, height, background color, and border of the small navigation dots at the bottom.
2. Settings
- Place row behind header: This makes the background of the top row visible behind a transparent header. This creates a modern transparency effect.
- Full-screen row: The row height is adjusted to the height of the browser window. This only applies to the desktop viewport.
- Show arrow navigation: Allow visitors to scroll through row slides by clicking on the arrows on both sides of the row.
- Show pagination dots: Allow visitors to scroll through row slides by clicking on small dots in the bottom center of the row.
- Automatic transition of slides: Row slides change automatically without visitors having to click on them.
- Pause transition on hover: Automatic transitions are paused when a visitor hovers over a row slide with their mouse.
- Slide transition type: Define how the slides are animated when they change.
- Slide transition interval: Set the number of milliseconds between automatic slide transitions. The default value is 5000 (5 seconds).
Keywords: Slider, Carousel, Website design, Create slider, Manage slides, Slider settings, Slide transition, Automatic playback, Arrow navigation, Pagination, Full-screen row, Header
Updated on: 06/08/2025
Thank you!