--- title: "Carousel" description: "The Carousel Component is a nice Option to show a Bundle of Images related to a dedicated Topic. Can also be used for any other Type of Contents." path: https://www.eonshowroom.eon.com/en/content-elements/carousel.html lastModified: 2025-03-13T15:19:42.338Z --- # Carousel # Carousel ![First Image in a Carousel](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/EON-solarpark-tucson_sky%3A2-1?fmt=webp) ![Second Image in a Carousel](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/baker_work_done%3A2-1?fmt=webp) [How to Configure](#how-to) ### Description The Carousel Component is a nice Option to show a Bundle of Images related to a dedicated Topic. Can also be used for any other Type of Contents. - Playmood forward or backward can be choosen - Large and small Indicators are available - Can include any Component as Content [Check it out on Storybook](https://storybook.web-ui.eon.com/eon/master/?path=/story/content-clickable-image--interactive) ### Inspirations ![contact](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/women_talking_onphone%3A1-1?fmt=webp) ## Foreground image without transparency Duis autem vel iriure dolor elit esse consequat. [Action intent](#) ![contact](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/product-no3-1?fmt=webp-alpha) ## Foreground image with transparency offset Duis autem vel eum iriure dolor elit esse molestie consequat. [Action intent](#) ##### This is a Carousel having 3 Items per Slide ![Unsere Position zur UN-Klimakonferenz 2021](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/GettyImages-1406349370-1%3A1-1?fmt=webp) ## Unsere Position zur UN-Klimakonferenz 2021 [Jetzt Hintergründe erfahren](#) ![H2. Ruhr - Teil der CEO-Alliance](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/GettyImages-1066626014-1%3A1-1?fmt=webp) ## H2. Ruhr - Teil der CEO-Alliance [Jetzt mitmachen](#) ![Unsere Position zur UN-Klimakonferenz 2021](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/GettyImages-1420176477-1%3A1-1?fmt=webp) ## Unsere Position zur Bundestagswahl [Jetzt handeln](#) ![Republic of Innovators](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/GettyImages-1040878018-(1)%3A1-1?fmt=webp) ## Unsere Position zur UN-Klimakonferenz 2021 [Jetzt anmelden](#) ![Unsere Position zur UN-Klimakonferenz 2021](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/GettyImages-1324475166%3A1-1?fmt=webp) ## Unsere Position zur UN-Klimakonferenz 2021 [Jetzt Hintergründe erfahren](#) ![Unsere Position zur UN-Klimakonferenz 2021](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/GettyImages-954077270%3A1-1?fmt=webp) ## Unsere Position zur UN-Klimakonferenz 2021 [Jetzt Hintergründe erfahren](#) ![Unsere Position zur UN-Klimakonferenz 2021](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/GettyImages-1408382071-2%3A1-1?fmt=webp) ## Unsere Position zur Bundestagswahl [Jetzt handeln](#) ![H2. Ruhr - Teil der CEO-Alliance](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/GettyImages-534584073%3A1-1?fmt=webp) ## H2. Ruhr - Teil der CEO-Alliance [Jetzt mitmachen](#) ### Usage Rules & Features ##### Features - Playspeed of Autoplay can be set in Seconds - Playmood forward or backward can be choosen - Can include any Component as Content ##### Properties - Number of Items per Slide are configurable - Number of Items per Move can be choosen - Indicators can be placed outside or on Image - Controls can also be displayed outside ##### Design - Large and small Indicators are available - Bright and dark Controls are available ##### In which Grid Columns does it fit? | Grid Columns | Does it fit? | | --- | --- | | 2 | no | | 3 | no | | 4 | yes | | 5 | yes | | 6 | yes | | 8 | yes | | 9 | yes | | 10 | yes | | 12 | yes | ##### DO's - Use bright Label Color Scheme on dark Content - Use dark Label Color Scheme on bright Content ##### DONT's - It is not recommanded to use more than 5 Slides in a Carousel - Do not configure fast Playspeed with much Content per Slide - Do not add to much Content per Item - Do not place Indicators on other Content then Images ## Configuration ## Trackable Component This Component can be tracked. [Read more about Tracking](https://www.eonshowroom.eon.com/en/aem-basics/tracking.html) ![](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/EON_Pattern_7-1%3A2-1?fmt=webp-alpha) ![Add multiple Grid Controls as Slides and give each an unique Title](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/carousel_add-item%3A4-3?fmt=webp) ### Add multiple Items In Editor Dialog, Editor can add multiple Slides as Grid Control and give each an **unique Title**. This Title will be used as Slide Title on the Editor Page. #### Keep in Mind - It is not recommanded to use more than 5 Slides in a Carousel. - Each Slides needs a unique Title ![Configure User Controls](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/carousel_controls%3A1-1?fmt=webp) ### Configure User Controls In Control Tab, Editor can configure User Control Settings. It is possible to hide Controls, or to select darken Controls to display Controls in a dark Theme for Bright Backgrounds. By default Controls will be displayed inside of Carousel Slides itself. But Style can also be selected as Outside. This Feature includes different Design of Controls. Furthermore, Indicators can be configured with large or small Size. Positioning left, center, or right, as well as completely hidden Indicators are possible. If Images are used as Content, Indicators can also be placed on it to display Indicators on the Images. ![](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/carousel_playmode%3A3-4?fmt=webp) ### Configure Playmode In Playmode Tab, Playspeed can be configured in Seconds between 0 (Autoplay disabled) and 10 Seconds, while 6 Seconds is default. Moreover, checking disable Loop Checkbox will hide Controls based on Carousel Position. e.g. left Control not shown for first Carousel Item. Furthermore, an ID can be set for the Carousel. Beside that, Editor can define how many Items will be shown per Slide. Items per Move defines how many Items will be shown on one Glance. It is recommend to use the same Number for Items per Slide as for Number of Items per Move. ## Keep in Mind Please make sure the Number of Slides matches the Items per Move for ALL Viewports. If they don't align, the last Slides may not be accessible. ![](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/carousel_style%3A4-3?fmt=webp) ### Select Style In Style Tab, Editor can select a Color Scheme as for most Components. Therefore, Editor needs to select on which Background Color the Carousel is used. Then, corresponding Color Schemes are selectable. Furthermore, Editor can equalize Carousel Item Height for Teasers if a One-Column-Grid is used. ![Select different Grids](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/carousel_maintain-slides%3A2-1?fmt=webp) ### Maintain Slides Afterwards, Editor can maintain each Grid of Carousel by selecting it from Dialog and configuring each Grid Control similar to a normal Grid. [Read more about the Grid Control](https://www.eonshowroom.eon.com/en/page-elements/grid.html) ![Select Grid Column Layout](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/carousel-grid_options%3A4-3?fmt=webp) The Grid Control Dialog itself can be maintained for 12, 8-4, 4-8, or 6-6 Grid Column. Inside this Grid Control only a limited Number of Components are available as defined in Component Policy. [Read more about the Component Policy](https://www.eonshowroom.eon.com/en/aem-basics/component-policy.html)