--- title: "Imagecard Cover Slider: More covers for your website" url: "https://www.toujou.com/service/element-library/card-elements/imagecard-cover-slider/" description: Display multiple browsers with the toujou element Imagecard Cover Slider ✓ Example view ✓ Instructions ✓ Behavior on end devices date: 2021-10-15 modified: 2022-09-27 --- # Imagecard Cover Slider: More covers for your website 1. [Home](https://www.toujou.de/) 2. [Service](https://www.toujou.de/service/) 3. [Element library](https://www.toujou.de/service/element-library/) 4. [Card elements](https://www.toujou.de/service/element-library/card-elements/) 5. [Imagecard Cover Slider](https://www.toujou.de/service/element-library/card-elements/imagecard-cover-slider/) Imagecard cover slider ====================== This element allows you to display multiple cards in a 9:16 ratio along with links and titles as a slider. [Sample view](#c1010445) [Manual](#c1010449) [Pieces of advice](#c1010452) --- Sample view ------------- - [ ![Zwei kleine Figuren stehen vor einem großen Bildschirm, der eine Webseite mit Informationen über TYPO3 zeigt.](https://www.toujou.de/_assets/processed/5aRgE6yjMo3KbuqpFi0coKkUSeKhW_WipzMnNZGEh-s/q:85/c:450:725.8064516129:fp:0.5:0.5/rt:force/w:172/h:277/fn:Y3NtXzE5MjB4ODAwX0hlYWRlcl9UWVBPMy1UdXRvcmlhbHNfMmE5NjZmYzFmZQ:t/cb:8d218074806083852dab8bb96efbe9568d7ed93c/bG9jYWw6L2ZpbGVhZG1pbi9JbWFnZXMvaGVhZGVyLzE5MjB4ODAwLzE5MjB4ODAwX0hlYWRlcl9UWVBPMy1UdXRvcmlhbHMucG5n)### All tutorials at a glance ](https://www.toujou.com/service/tutorials/) - [ ![In einer Büroszene steht eine Frau neben dem Schreibtisch, im Hintergrund ist ein Sofa zu sehen](https://www.toujou.de/_assets/processed/-bgDqfcX92RITSTOEoEsx_qiluDaDRSziOAwkOyNNvQ/q:85/c:295.3125:476.31048387097:fp:0.5:0.5/rt:force/w:172/h:277/fn:Y3NtX0xpc2FfSW50ZXJ2aWV3X2FhMThmMjBhOTA:t/cb:e95d4850e2c7d7cfaf0d26091e72b53938dd70a6/bG9jYWw6L2ZpbGVhZG1pbi90b3Vqb3UvSW5zdGFncmFtL0xpc2FfSW50ZXJ2aWV3LmpwZw)### toujou insights with Lisa ](https://www.toujou.com/blog/interview-i-would-like-more-people-to-put-more-emphasis-on-a-good-website/) - [ ![Ein gemütlicher Raum mit einem Schreibtisch, wo eine Person arbeitet, während eine andere sich und eine Pflanze im Hintergrund steht.](https://www.toujou.de/_assets/processed/81bea03xNdL-UikUsEGq6T1o_8ChSOfHMt_KG0LpaME/q:85/c:450:725.8064516129:fp:0.5:0.5/rt:force/w:172/h:277/fn:Y3NtXzE5MjB4ODAwX2hlYWRlcl9zZXJ2aWNlXzk0ZmU1Mjg3Yzc:t/cb:5f1cd16c10c25895a1fef11cf127bb5c3546bb22/bG9jYWw6L2ZpbGVhZG1pbi9JbWFnZXMvaGVhZGVyLzE5MjB4ODAwLzE5MjB4ODAwX2hlYWRlcl9zZXJ2aWNlLnBuZw)### Presenting the service team ](https://www.toujou.com/service/support/) - [ ![Ein moderner Computerbildschirm zeigt verschiedene soziale Medien-Icons auf einem schwarzen Hintergrund.](https://www.toujou.de/_assets/processed/v6RVSmAUG4RH9AItOJ5iW7rL5mpYsFSQ3kIxAqBhES0/q:85/c:450:725.8064516129:fp:0.5:0.5/rt:force/w:172/h:277/fn:Y3NtXzE5MjB4ODAwX3RvdWpvdV9zb2NpYWxfbWVkaWFfYmFyXzYzZmZkZTJiY2M:t/cb:c084f9f4faf54f7566a3bdc13f56207f9c28dc99/bG9jYWw6L2ZpbGVhZG1pbi9JbWFnZXMvaGVhZGVyLzE5MjB4ODAwLzE5MjB4ODAwX3RvdWpvdV9zb2NpYWxfbWVkaWFfYmFyLmpwZw)### Social media bar on the website ](https://www.toujou.com/service/element-library/widgets/social-media-bar/) - [ ![](https://www.toujou.de/_assets/processed/YU9sACVyVsRTzBixz4PXhzNtPIaRK9iaUqLd_Q2MokA/q:85/c:345.375:557.0564516129:fp:0.5:0.5/rt:force/w:172/h:277/fn:Y3NtX1NjaHVsdW5nZW5fdG91am91X2I4NmRmMmUyN2U:t/cb:b949caee4f551ea0d5f30c2ff399ffee763e4d61/bG9jYWw6L2ZpbGVhZG1pbi90b3Vqb3UvSW5zdGFncmFtL1NjaHVsdW5nZW5fdG91am91LmpwZw)### All toujou features ](https://www.toujou.com/features/) - [ ![](https://www.toujou.de/_assets/processed/bm5H1U-B5E_XUmQvJ7zHwVGYyxRtD9qtRrUyBbJMWlo/q:85/c:295.3125:476.31048387097:fp:0.5:0.5/rt:force/w:172/h:277/fn:Y3NtX1Nlb0x1cGVfSW5zdGFfYTYzOWFiYjYyOA:t/cb:0ef86ae1114d17969c95d75300f858f4e226fb83/bG9jYWw6L2ZpbGVhZG1pbi90b3Vqb3UvSW5zdGFncmFtL1Nlb0x1cGVfSW5zdGEuanBn)### SEO with Yoast for toujou ](https://www.toujou.com/service/tutorials/yoast-seo/) - [ ![](https://www.toujou.de/_assets/processed/NoxIiGJSzgfKDXy1lYZpr5E94ubboIyBovwY1N3HWEE/q:85/c:345.375:557.0564516129:fp:0.5:0.5/rt:force/w:172/h:277/fn:Y3NtX0luc3RhZ3JhbV9JbnN0YV9Mb3N0X2FjY291bnRfYTVkODNmZGRkYg:t/cb:539f18a7c81c965433613409f16e091d64c497fd/bG9jYWw6L2ZpbGVhZG1pbi9CaWxkZXIvQmxvZy1Db250ZW50LzIwMjFfMDhfMTVfSW5zdGFncmFtLUtvbnRvX2dlc3BlcnJ0L0luc3RhZ3JhbV9JbnN0YV9Mb3N0X2FjY291bnQucG5n)### Create a blogpost ](https://www.toujou.com/service/tutorials/blog-administration/) - [ ![](https://www.toujou.de/_assets/processed/53zdHpTMCFnPj2COagOiVfBhr3TQv97LbIbEgom12Go/q:85/c:295.3125:476.31048387097:fp:0.5:0.5/rt:force/w:172/h:277/fn:Y3NtX2RvbWFpbl92ZXJpZml6aWVyZW5faW5zdGFfYzk3NjE1MTBjZA:t/cb:5a13af846e16ee228a22cc49f61b62c721cb008e/bG9jYWw6L2ZpbGVhZG1pbi90b3Vqb3UvSW5zdGFncmFtL2RvbWFpbl92ZXJpZml6aWVyZW5faW5zdGEuanBn)### Analytics with toujou ](https://www.toujou.com/service/toujou-set-up/analytics-settings/) - [ ![Eine digitale Benutzeroberfläche wird von zwei Figuren auf einer Hebebühne betrachtet, während sie an einem Projekt arbeiten.](https://www.toujou.de/_assets/processed/ntuG6zWQccrnAppLfPmClOcaNOuoWzSHJ5rXpGalQYg/q:85/c:450:725.8064516129:fp:0.5:0.5/rt:force/w:172/h:277/fn:Y3NtXzE5MjB4ODAwX0hlYWRlcl9FbGVtZW50LWxpYnJhcnlfZjliNWRmZmM0OA:t/cb:1305e23ee83a60de5f6c36c46c61c8feffa50315/bG9jYWw6L2ZpbGVhZG1pbi9JbWFnZXMvaGVhZGVyLzE5MjB4ODAwLzE5MjB4ODAwX0hlYWRlcl9FbGVtZW50LWxpYnJhcnkucG5n)### All elements at a glance ](https://www.toujou.com/service/element-library/) - [ ![Auf einer blauen Oberfläche liegt ein weißes Blatt Papier, das wichtige Informationen und ein grünes Häkchen enthält.](https://www.toujou.de/_assets/processed/dSqS3SVtptLPriDHHPWArbbecuEvQk4czUbCoRvKQgw/q:85/c:450:725.8064516129:fp:0.5:0.5/rt:force/w:172/h:277/fn:Y3NtXzE5MjB4ODAwX0hlYWRlcl9Gb3Jtc18wMV9iZWUwNmM1ZGUy:t/cb:402e7d12441c151f7a973b016eefc808b140df99/bG9jYWw6L2ZpbGVhZG1pbi9JbWFnZXMvaGVhZGVyLzE5MjB4ODAwLzE5MjB4ODAwX0hlYWRlcl9Gb3Jtc18wMS5wbmc)### Create forms in toujou ](https://www.toujou.com/service/element-library/widgets/forms/) - [ ![](https://www.toujou.de/_assets/processed/gT9qCVGXfcexMaAhQT6mbKOxRylMV7-u1yG-YlsuLZE/q:85/c:295.3125:476.31048387097:fp:0.5:0.5/rt:force/w:172/h:277/fn:Y3NtX0JpbGRlcl9pbV9CbG9nZWludHJhZ18wNTVkYTQwODM0:t/cb:45a04214c9d3ca836bdb398d2fefd962fa6e26c5/bG9jYWw6L2ZpbGVhZG1pbi90b3Vqb3UvSW5zdGFncmFtL0JpbGRlcl9pbV9CbG9nZWludHJhZy5qcGc)### How to start in toujou ](https://www.toujou.com/service/toujou-set-up/) - [ ![](https://www.toujou.de/_assets/processed/1V2nrsis8iX758cnunsFc5CaoRpuMxsZZBiG5OpYs94/q:85/c:295.3125:476.31048387097:fp:0.5:0.5/rt:force/w:172/h:277/fn:Y3NtX0NsaWNrTWVldF9taXRfdG91am91X2YzMzQxZmEwZWM:t/cb:9e751c1305a78f312e2be8b3902bfe909f58eb93/bG9jYWw6L2ZpbGVhZG1pbi90b3Vqb3UvSW5zdGFncmFtL0NsaWNrTWVldF9taXRfdG91am91LmpwZw)### Display events in toujou ](https://www.toujou.com/service/tutorials/pages-navigation/events-in-toujou/) --- Step by step -------------- [ ![](https://www.toujou.de/_assets/processed/gZ9s-8YBYDUe17naPqS09Pypyhqi-JVC3iNlKhOihkM/q:85/c:936:526.49999999999:fp:0.5:0.5/rt:force/w:432/h:243/fn:Y3NtX0ltYWdlY2FyZF9jb3Zlcl9zbGlkZXJfc2VsZWN0X2VsZW1lbnRfOWEzOThjODk2OA:t/cb:d7cfe7b704a5dd703d645fac97daad2a3c26c6b0/bG9jYWw6L2ZpbGVhZG1pbi90b3Vqb3UvZWxlbWVudF9saWJyYXJ5LzA0X0NhcmRfZWxlbWVudHMvMDFfSW1hZ2VfY2FyZHMvSW1hZ2VjYXJkX0NvdmVyX1NsaWRlci9JbWFnZWNhcmRfY292ZXJfc2xpZGVyX3NlbGVjdF9lbGVtZW50LmpwZw) ](https://www.toujou.de/fileadmin/toujou/element_library/04_Card_elements/01_Image_cards/Imagecard_Cover_Slider/Imagecard_cover_slider_select_element.jpg) ### Choose element - After clicking the +Content button you can select the **Imagecard cover slider** element in the *Card Elements* tab. [ ![](https://www.toujou.de/_assets/processed/-iyVVnht4ThzJyI8coO_2sVv00agu5KW8EQphTDDseU/q:85/c:936:526.49999999999:fp:0.5:0.5/rt:force/w:432/h:243/fn:Y3NtX2ltYWdlY2FyZF9jb3Zlcl9zbGlkZXJfY3JlYXRlX2VsZW1lbnRfNzc5OTYwZDhhYg:t/cb:282692ce315905da30651b47ececfd02d4057304/bG9jYWw6L2ZpbGVhZG1pbi90b3Vqb3UvZWxlbWVudF9saWJyYXJ5LzA0X0NhcmRfZWxlbWVudHMvMDFfSW1hZ2VfY2FyZHMvSW1hZ2VjYXJkX0NvdmVyX1NsaWRlci9pbWFnZWNhcmRfY292ZXJfc2xpZGVyX2NyZWF0ZV9lbGVtZW50LnBuZw) ](https://www.toujou.de/fileadmin/toujou/element_library/04_Card_elements/01_Image_cards/Imagecard_Cover_Slider/imagecard_cover_slider_create_element.png) ### Create cards In the *General* tab you can create as many cards as you wpuld like. Click the **create new** button for each card. [ ![](https://www.toujou.de/_assets/processed/a-_D-UVgF9DPGaJYfI8UHG4ZrnrzZ_9vlCNhkmCa3o8/q:85/c:935.11111111112:526:fp:0.5:0.4991452991453/rt:force/w:432/h:243/fn:Y3NtX2ltYWdlY2FyZF9jb3Zlcl9zbGlkZXJfbmFtZV9saW5rX2VsZW1lbnRfYmYxMGVlMDdmMw:t/cb:7808e3551c34acd74f8302219aea7fd7e24222b5/bG9jYWw6L2ZpbGVhZG1pbi90b3Vqb3UvZWxlbWVudF9saWJyYXJ5LzA0X0NhcmRfZWxlbWVudHMvMDFfSW1hZ2VfY2FyZHMvSW1hZ2VjYXJkX0NvdmVyX1NsaWRlci9pbWFnZWNhcmRfY292ZXJfc2xpZGVyX25hbWVfbGlua19lbGVtZW50LnBuZw) ](https://www.toujou.de/fileadmin/toujou/element_library/04_Card_elements/01_Image_cards/Imagecard_Cover_Slider/imagecard_cover_slider_name_link_element.png) ### Edit card settings - For each card you create, you can also specify the medium, title and link individually. For a title, enter the title in the text field. - To upload an image, click on **Add file** or **Select files and upload**. If you are unsure about cropping media correctly, tak a look at our tutorial [image editing](https://www.toujou.de/service/tutorials/page-content/image-editing/#c1004873). - If you want to add a link, click the **chain icon** in the *Link* section located on the right to view all of the different link options available. --- Pieces of advice ---------------- **The imagecard cover slider displays several cards side by side and allows you to display several images in the form of a gallery. The individual cards are displayed on all devices in a fixed ratio of 9:16 and can be edited in the image editor. In addition, you can also set a link on each individual card with the resulting mouseover effect that can vary from theme to theme.** **Worth noting:** Depending on the theme, you can use the Element Design to vary the color of a card's label and arrows. **Responsive Behaviour:** The number of displayed cards viewed at a time on the imagecard cover slider varies depending on the size of the display on the user's device.