--- title: How to Use the Carousel Slider Widget? description: The Carousel Slider widget lets you display images in a rotating format. Customize navigation, speed, and transition effects for an engaging user experience. --- [Skip to content](https://success.ministrydesigns.help/how-to-use-the-carousel-slider-widget#main-content) English Show submenu for translations [Submit a Ticket](https://success.ministrydesigns.help/kb-tickets/new) [![MD Logo 1\_Black-2](https://success.ministrydesigns.help/hs-fs/hubfs/MD%20Logo%201_Black-2.png?width=200&height=73&name=MD%20Logo%201_Black-2.png)](https://ministrydesigns.com/) Open main navigation Close main navigation - English Show submenu for translations - [Submit a Ticket](https://success.ministrydesigns.help/kb-tickets/new) How can we help you? - There are no suggestions because the search field is empty. 1. [Ministry Designs Success Hub](https://success.ministrydesigns.help/) 2. [Sites (Formerly Omega)](https://success.ministrydesigns.help/sites-formerly-omega) 3. [Pages](https://success.ministrydesigns.help/sites-formerly-omega#pages) # How to Use the Carousel Slider Widget? ## Create an interactive scrolling image carousel 1\. A carousel slider is a widget that has a rotating display of images that users can navigate through by clicking on arrows or dots. It often shows one or a few items at a time and cycles through multiple items, either automatically or when prompted by the user. This type of slider is commonly used to showcase featured products, images, or articles in a visually engaging way. Drag and drop the Carousel Slider widget on the page ![](https://ajeuwbhvhr.cloudimg.io/colony-recorder.s3.amazonaws.com/files/2024-07-21/ae4bb4d7-f4f8-4814-808d-33a835257ceb/ascreenshot.jpeg?tl_px=0,136&br_px=859,617&force_format=jpeg&q=100&width=860&wat_scale=76&wat=1&wat_opacity=0.7&wat_gravity=northwest&wat_url=https://colony-recorder.s3.us-west-1.amazonaws.com/images/watermarks/FB923C_standard.png&wat_pad=191,212) 2\. Left-click the Carousel Slider to edit the Settings described in Step 3 and further ![](https://ajeuwbhvhr.cloudimg.io/colony-recorder.s3.amazonaws.com/files/2024-06-08/644954b9-575a-4752-9591-017f6f73a077/ascreenshot.jpeg?tl_px=299,180&br_px=1446,821&force_format=jpeg&q=100&width=1120.0&wat=1&wat_opacity=0.7&wat_gravity=northwest&wat_url=https://colony-recorder.s3.us-west-1.amazonaws.com/images/watermarks/FB923C_standard.png&wat_pad=524,277) 3\. Left-click the Carousel Slider widget twice or click "Edit" to prompt the window from Step 4 ![](https://ajeuwbhvhr.cloudimg.io/colony-recorder.s3.amazonaws.com/files/2024-06-08/d68e87b5-c469-488b-9924-6c597f3cf984/ascreenshot.jpeg?tl_px=665,34&br_px=1525,515&force_format=jpeg&q=100&width=860&wat_scale=76&wat=1&wat_opacity=0.7&wat_gravity=northwest&wat_url=https://colony-recorder.s3.us-west-1.amazonaws.com/images/watermarks/FB923C_standard.png&wat_pad=696,212) 4\. Click "Add Images" ![](https://ajeuwbhvhr.cloudimg.io/colony-recorder.s3.amazonaws.com/files/2024-06-08/0284b025-17a6-4852-bbe2-0cea2ea32e0c/ascreenshot.jpeg?tl_px=0,0&br_px=859,480&force_format=jpeg&q=100&width=860&wat_scale=76&wat=1&wat_opacity=0.7&wat_gravity=northwest&wat_url=https://colony-recorder.s3.us-west-1.amazonaws.com/images/watermarks/FB923C_standard.png&wat_pad=279,64) 5\. Select images for the Carousel Slider from the Media Library ![](https://ajeuwbhvhr.cloudimg.io/colony-recorder.s3.amazonaws.com/files/2024-06-08/c05e5ffa-d5ba-4267-ac76-1a901076844d/ascreenshot.jpeg?tl_px=79,95&br_px=938,576&force_format=jpeg&q=100&width=860&wat_scale=76&wat=1&wat_opacity=0.7&wat_gravity=northwest&wat_url=https://colony-recorder.s3.us-west-1.amazonaws.com/images/watermarks/FB923C_standard.png&wat_pad=402,212) Make sure that the images have the same aspect ratio. When all images have the same aspect ratio, the carousel slider looks neat and organized. This uniformity makes the website appear more professional and aesthetically pleasing. You can select several images for the Carousel Slider from the Media Library by holding the Ctrl button on the keyboard and left-clicking once on each image 6\. Click "Apply" to add the required images to the Carousel Slider ![](https://ajeuwbhvhr.cloudimg.io/colony-recorder.s3.amazonaws.com/files/2024-06-08/53c443c6-9aaa-4601-8e2f-99128723c007/ascreenshot.jpeg?tl_px=138,304&br_px=1285,945&force_format=jpeg&q=100&width=1120.0&wat=1&wat_opacity=0.7&wat_gravity=northwest&wat_url=https://colony-recorder.s3.us-west-1.amazonaws.com/images/watermarks/FB923C_standard.png&wat_pad=523,439) 7\. Click "Apply" again to confirm the selected images ![](https://ajeuwbhvhr.cloudimg.io/colony-recorder.s3.amazonaws.com/files/2024-06-08/1c1f9740-fb14-4ada-9bd5-8f1cd88f168a/ascreenshot.jpeg?tl_px=14,175&br_px=1391,945&force_format=jpeg&q=100&width=1120.0&wat=1&wat_opacity=0.7&wat_gravity=northwest&wat_url=https://colony-recorder.s3.us-west-1.amazonaws.com/images/watermarks/FB923C_standard.png&wat_pad=524,441) 8\. Specify width with "Slide Width" ![](https://ajeuwbhvhr.cloudimg.io/colony-recorder.s3.amazonaws.com/files/2024-06-08/b31dd2f9-35a7-478e-8811-f78b6c0fa6e5/ascreenshot.jpeg?tl_px=1060,118&br_px=1920,599&force_format=jpeg&q=100&width=860&wat_scale=76&wat=1&wat_opacity=0.7&wat_gravity=northwest&wat_url=https://colony-recorder.s3.us-west-1.amazonaws.com/images/watermarks/FB923C_standard.png&wat_pad=628,212) 9\. Specify the minimum number of visible slides in the Carousel Slider with "Min Slides" ![](https://ajeuwbhvhr.cloudimg.io/colony-recorder.s3.amazonaws.com/files/2024-06-08/f4757004-301f-460a-9091-77a24dc6c1a2/ascreenshot.jpeg?tl_px=1060,197&br_px=1920,678&force_format=jpeg&q=100&width=860&wat_scale=76&wat=1&wat_opacity=0.7&wat_gravity=northwest&wat_url=https://colony-recorder.s3.us-west-1.amazonaws.com/images/watermarks/FB923C_standard.png&wat_pad=603,212) 10\. Specify the maximum number of visible slides that can be shown in the Carousel Slider with "Max Slides". ![](https://ajeuwbhvhr.cloudimg.io/colony-recorder.s3.amazonaws.com/files/2024-06-08/27bda041-9e19-4769-908c-c70d1c12a334/ascreenshot.jpeg?tl_px=1060,278&br_px=1920,759&force_format=jpeg&q=100&width=860&wat_scale=76&wat=1&wat_opacity=0.7&wat_gravity=northwest&wat_url=https://colony-recorder.s3.us-west-1.amazonaws.com/images/watermarks/FB923C_standard.png&wat_pad=608,212) Both "Min Slides" and "Max Slides" values can be set from 1 up to 30 11\. Select from the "Switch Slides" dropdown if slides need to be switched one by one or as group slides. ![](https://ajeuwbhvhr.cloudimg.io/colony-recorder.s3.amazonaws.com/files/2024-06-08/b70cee22-e4ba-488a-85a3-f37754f7ea89/ascreenshot.jpeg?tl_px=1060,361&br_px=1920,842&force_format=jpeg&q=100&width=860&wat_scale=76&wat=1&wat_opacity=0.7&wat_gravity=northwest&wat_url=https://colony-recorder.s3.us-west-1.amazonaws.com/images/watermarks/FB923C_standard.png&wat_pad=670,212) 12\. Use the Margin to increase the spacing between each slide ![](https://ajeuwbhvhr.cloudimg.io/colony-recorder.s3.amazonaws.com/files/2024-06-08/1b254ebf-27a2-48f7-96e6-11a578cbc182/ascreenshot.jpeg?tl_px=1060,330&br_px=1920,811&force_format=jpeg&q=100&width=860&wat_scale=76&wat=1&wat_opacity=0.7&wat_gravity=northwest&wat_url=https://colony-recorder.s3.us-west-1.amazonaws.com/images/watermarks/FB923C_standard.png&wat_pad=670,212) 13\. Enable or disable the slideshow with the "Enable Slideshow" checkbox ![](https://ajeuwbhvhr.cloudimg.io/colony-recorder.s3.amazonaws.com/files/2024-06-08/4fa13c39-593d-4aa6-91b3-d798d6967382/ascreenshot.jpeg?tl_px=1060,388&br_px=1920,869&force_format=jpeg&q=100&width=860&wat_scale=76&wat=1&wat_opacity=0.7&wat_gravity=northwest&wat_url=https://colony-recorder.s3.us-west-1.amazonaws.com/images/watermarks/FB923C_standard.png&wat_pad=577,212) 14\. Set the slide speed with "Slide Duration" ![](https://ajeuwbhvhr.cloudimg.io/colony-recorder.s3.amazonaws.com/files/2024-06-08/efe47163-9167-4089-809a-e03c1ae46c70/ascreenshot.jpeg?tl_px=937,395&br_px=1920,945&force_format=jpeg&q=100&width=983&wat_scale=87&wat=1&wat_opacity=0.7&wat_gravity=northwest&wat_url=https://colony-recorder.s3.us-west-1.amazonaws.com/images/watermarks/FB923C_standard.png&wat_pad=796,265) 15\. Enable or disable the arrows in the Carousel Slider with the "Show Arrows" checkbox ![](https://ajeuwbhvhr.cloudimg.io/colony-recorder.s3.amazonaws.com/files/2024-06-08/9e2d6792-bc26-4acb-a066-730281665113/ascreenshot.jpeg?tl_px=937,395&br_px=1920,945&force_format=jpeg&q=100&width=983&wat_scale=87&wat=1&wat_opacity=0.7&wat_gravity=northwest&wat_url=https://colony-recorder.s3.us-west-1.amazonaws.com/images/watermarks/FB923C_standard.png&wat_pad=696,320) 16\. This is how they look on the page. These arrows help users easily browse through the content in the slider. ![](https://ajeuwbhvhr.cloudimg.io/colony-recorder.s3.amazonaws.com/files/2024-06-08/5f77a6b6-e29f-40a1-8877-aabde9968c13/ascreenshot.jpeg?tl_px=1060,189&br_px=1920,670&force_format=jpeg&q=100&width=860&wat_scale=76&wat=1&wat_opacity=0.7&wat_gravity=northwest&wat_url=https://colony-recorder.s3.us-west-1.amazonaws.com/images/watermarks/FB923C_standard.png&wat_pad=443,212) 17\. Enable or disable pagination in the Carousel Slider with the "Show Pagination" checkbox ![](https://ajeuwbhvhr.cloudimg.io/colony-recorder.s3.amazonaws.com/files/2024-06-08/375dd258-1e19-49c5-9e53-63f4fffe5413/ascreenshot.jpeg?tl_px=937,395&br_px=1920,945&force_format=jpeg&q=100&width=983&wat_scale=87&wat=1&wat_opacity=0.7&wat_gravity=northwest&wat_url=https://colony-recorder.s3.us-west-1.amazonaws.com/images/watermarks/FB923C_standard.png&wat_pad=696,356) 18\. This is how it looks on the page. It visually shows how many images are in the Carousel Slider and which image is currently being viewed ![](https://ajeuwbhvhr.cloudimg.io/colony-recorder.s3.amazonaws.com/files/2024-06-08/88cd31ef-6378-41a8-8e1a-4411cb6ff8ba/ascreenshot.jpeg?tl_px=148,303&br_px=1007,784&force_format=jpeg&q=100&width=860&wat_scale=76&wat=1&wat_opacity=0.7&wat_gravity=northwest&wat_url=https://colony-recorder.s3.us-west-1.amazonaws.com/images/watermarks/FB923C_standard.png&wat_pad=402,212) 19\. To add a caption, left-click the Carousel Slider widget twice or click "Edit" ![](https://ajeuwbhvhr.cloudimg.io/colony-recorder.s3.amazonaws.com/files/2024-06-08/f865d55e-3c4c-4ae4-a91f-9df9d2608dd4/ascreenshot.jpeg?tl_px=650,42&br_px=1510,523&force_format=jpeg&q=100&width=860&wat_scale=76&wat=1&wat_opacity=0.7&wat_gravity=northwest&wat_url=https://colony-recorder.s3.us-west-1.amazonaws.com/images/watermarks/FB923C_standard.png&wat_pad=691,212) 20\. Click on a pencil icon to edit an image in the Carousel Slider ![](https://ajeuwbhvhr.cloudimg.io/colony-recorder.s3.amazonaws.com/files/2024-06-08/9b73f833-dcae-4df1-b86e-ce2756565692/ascreenshot.jpeg?tl_px=0,4&br_px=859,485&force_format=jpeg&q=100&width=860&wat_scale=76&wat=1&wat_opacity=0.7&wat_gravity=northwest&wat_url=https://colony-recorder.s3.us-west-1.amazonaws.com/images/watermarks/FB923C_standard.png&wat_pad=282,212) 21\. Select from the dropdown where to link the Carousel Slider image. It can lead to a page/specific page section or an action, for example, "Mail To", "Call To", or "Open File" after it is clicked. Please refer to [the following guide](https://success.ministrydesigns.help/link-to-overview) that explains in broad detail how the Link To feature works. ![](https://ajeuwbhvhr.cloudimg.io/colony-recorder.s3.amazonaws.com/files/2024-06-08/c58db7da-eac6-4fdc-ab91-dd61e356284b/ascreenshot.jpeg?tl_px=261,19&br_px=1121,500&force_format=jpeg&q=100&width=860&wat_scale=76&wat=1&wat_opacity=0.7&wat_gravity=northwest&wat_url=https://colony-recorder.s3.us-west-1.amazonaws.com/images/watermarks/FB923C_standard.png&wat_pad=402,212) 22\. Use [the Text Editor](https://success.ministrydesigns.help/how-to-use-the-text-widget) for detailed editing of the caption. Use additional options besides Text Styles, such as alignment, adding a link to text, etc. ![](https://ajeuwbhvhr.cloudimg.io/colony-recorder.s3.amazonaws.com/files/2024-06-08/517a4d9b-3991-4fd3-9346-c960c6eea94e/ascreenshot.jpeg?tl_px=296,137&br_px=1156,618&force_format=jpeg&q=100&width=860&wat_scale=76&wat=1&wat_opacity=0.7&wat_gravity=northwest&wat_url=https://colony-recorder.s3.us-west-1.amazonaws.com/images/watermarks/FB923C_standard.png&wat_pad=402,212) 23\. Specify an Alt Text for the Carousel Slider image. ![](https://ajeuwbhvhr.cloudimg.io/colony-recorder.s3.amazonaws.com/files/2024-06-08/139a02af-9a33-4c28-8bd2-fa0661f533fa/ascreenshot.jpeg?tl_px=77,459&br_px=936,940&force_format=jpeg&q=100&width=860&wat_scale=76&wat=1&wat_opacity=0.7&wat_gravity=northwest&wat_url=https://colony-recorder.s3.us-west-1.amazonaws.com/images/watermarks/FB923C_standard.png&wat_pad=402,212) The Alt Text provides alternative information for an image if a user for some reason cannot view it (because of a slow connection or if the user uses a screen reader). Please refer to [this guide](https://success.ministrydesigns.help/how-do-i-seo-optimize-my-website) on how to adjust the SEO settings 24\. Click "Apply" to confirm the changes to the image ![](https://ajeuwbhvhr.cloudimg.io/colony-recorder.s3.amazonaws.com/files/2024-06-08/85012df3-dece-4605-bd1c-0995af532e02/ascreenshot.jpeg?tl_px=234,395&br_px=1217,945&force_format=jpeg&q=100&width=983&wat_scale=87&wat=1&wat_opacity=0.7&wat_gravity=northwest&wat_url=https://colony-recorder.s3.us-west-1.amazonaws.com/images/watermarks/FB923C_standard.png&wat_pad=459,350) 25\. Click "Apply" again to confirm these changes to the image in the Carousel Slider ![](https://ajeuwbhvhr.cloudimg.io/colony-recorder.s3.amazonaws.com/files/2024-06-08/7647cc5d-fc0b-44c0-b623-c01e1a513936/ascreenshot.jpeg?tl_px=27,175&br_px=1403,945&force_format=jpeg&q=100&width=1120.0&wat=1&wat_opacity=0.7&wat_gravity=northwest&wat_url=https://colony-recorder.s3.us-west-1.amazonaws.com/images/watermarks/FB923C_standard.png&wat_pad=524,434) 26\. Click "Save" for the changes to take effect on the page ![](https://ajeuwbhvhr.cloudimg.io/colony-recorder.s3.amazonaws.com/files/2024-06-08/219a47d0-cf73-4ad3-a551-97e97bf13f36/ascreenshot.jpeg?tl_px=650,0&br_px=1510,480&force_format=jpeg&q=100&width=860&wat_scale=76&wat=1&wat_opacity=0.7&wat_gravity=northwest&wat_url=https://colony-recorder.s3.us-west-1.amazonaws.com/images/watermarks/FB923C_standard.png&wat_pad=778,67) 27\. This is how it will look on the page preview. The caption for the Carousel Slider has been edited with the Text Editor ![](https://ajeuwbhvhr.cloudimg.io/colony-recorder.s3.amazonaws.com/files/2024-06-08/221bd5c5-4c93-45be-948f-a36ad17d259d/ascreenshot.jpeg?tl_px=215,206&br_px=1075,687&force_format=jpeg&q=100&width=860&wat_scale=76&wat=1&wat_opacity=0.7&wat_gravity=northwest&wat_url=https://colony-recorder.s3.us-west-1.amazonaws.com/images/watermarks/FB923C_standard.png&wat_pad=402,212) The rest of the features here - Spacing, Visible On, Animation, and Design - Preset are common features in most widgets in the website builder. Please refer to [this guide](https://success.ministrydesigns.help/what-are-the-shared-features-in-the-website-builder) for more information on these features. - [Account](https://success.ministrydesigns.help/account) - [Sites (Formerly Omega)](https://success.ministrydesigns.help/sites-formerly-omega#main-content) - [Next-Steps Framework](https://success.ministrydesigns.help/sites-formerly-omega#next-steps-framework) - [Video Guides](https://success.ministrydesigns.help/sites-formerly-omega#video-guides) - [Site Builder Profile Settings](https://success.ministrydesigns.help/sites-formerly-omega#site-builder-profile-settings) - [Pages](https://success.ministrydesigns.help/sites-formerly-omega#pages) - [Design](https://success.ministrydesigns.help/sites-formerly-omega#design) - [Media Library](https://success.ministrydesigns.help/sites-formerly-omega#media-library) - [Extensions](https://success.ministrydesigns.help/sites-formerly-omega#extensions) - [Blog](https://success.ministrydesigns.help/sites-formerly-omega#blog) - [Events](https://success.ministrydesigns.help/sites-formerly-omega#events) - [Small Groups](https://success.ministrydesigns.help/sites-formerly-omega#small-groups) - [Sermons](https://success.ministrydesigns.help/sites-formerly-omega#sermons) - [Settings](https://success.ministrydesigns.help/sites-formerly-omega#settings) - [SEO](https://success.ministrydesigns.help/sites-formerly-omega#seo) - [Website Management](https://success.ministrydesigns.help/sites-formerly-omega#website-management) - [FAQ](https://success.ministrydesigns.help/sites-formerly-omega#faq) - [illume for Church Members](https://success.ministrydesigns.help/illume-for-church-members#main-content) - [Signing Up](https://success.ministrydesigns.help/illume-for-church-members#signing-up) - [Giving](https://success.ministrydesigns.help/illume-for-church-members#giving) - [illume for Church Administration](https://success.ministrydesigns.help/illume-for-church-administration#main-content) - [Getting Started](https://success.ministrydesigns.help/illume-for-church-administration#getting-started) - [Managing Your Account](https://success.ministrydesigns.help/illume-for-church-administration#managing-your-account) - [Using People](https://success.ministrydesigns.help/illume-for-church-administration#using-people) - [Using Giving](https://success.ministrydesigns.help/illume-for-church-administration#using-giving) [![MD Logo 1\_Black-3](https://success.ministrydesigns.help/hs-fs/hubfs/MD%20Logo%201_Black-3.png?width=200&height=73&name=MD%20Logo%201_Black-3.png "MD Logo 1_Black-3")](http://ministrydesigns.com) 15 Carlyle St Floor 2, Battle Creek, Mi 49017 [mailto:email@email.com](mailto:email@email.com) Copyright © 2025,