--- title: Image-Teaser Slider, right url: "https://www.toujou.com/service/element-library/teaser-elements/image-teaser-slider-right/" date: 2021-03-11 modified: 2022-09-27 --- # Image-Teaser Slider, right 1. [Home](https://www.toujou.de/) 2. [Service](https://www.toujou.de/service/) 3. [Element library](https://www.toujou.de/service/element-library/) 4. [Teaser elements](https://www.toujou.de/service/element-library/teaser-elements/) 5. [Image-Teaser Slider, right](https://www.toujou.de/service/element-library/teaser-elements/image-teaser-slider-right/) Image-Teaser Slider, right ========================== A selection of several teasers in a slider with one media source (original format) displayed on the right and the text displayed on the left. Item-ID: 02-005 [Sample view](#c1009507) [Step by step guide](#c1009509) [Screen adaption](#c1009513) ![](https://www.toujou.de/_assets/processed/fFM4bo7u1K86jniQa0JgNTmPzO-cejG8U_z6s0JpOgQ/q:85/w:433/h:54/fn:Y3NtXzA1XzAwMi1TbGlkZXJfRWxlbWVudF8yMDAwXzI1MF8zMDc0ZDFkOTE0:t/cb:bb67f4c90c878e11dfb74eb7fca705fe4f736b59/bG9jYWw6L2ZpbGVhZG1pbi90b3Vqb3UvZGVtby9JY29ucy9Gb3JtYXRlL0JpYl8yMDAwXzI1MC8wNV9NZWRpYV9FbGVtZW50c18yMDAwXzI1MC8wNV8wMDItU2xpZGVyX0VsZW1lbnRfMjAwMF8yNTAucG5n) --- Sample view ------------- - ![](https://www.toujou.de/_assets/processed/chknikDTHfWhPOV9Xxb0SHB9v9H32Z4tLQVNTh1AXI4/q:85/c:1920:1185.1851851852:fp:0.5:0.5/rt:force/w:448/h:277/fn:Y3NtX2RlbW9fMDJfNjI5NjY0Y2YzZA:t/cb:1c45b8f073e12d99344c4fcaf7272adc5baf7cfa/bG9jYWw6L2ZpbGVhZG1pbi90b3Vqb3UvZGVtby9kZW1vXzAyLmpwZw) Lorem ipsum dolor sit amet, mollis vocibus at cum. Eos te iriure epicurei, in pri iisque eligendi. Et has recusabo sapientem, usu delectus recteque accusamus an. In doming luptatum vis, voluptua democritum mel at. Mei aeque vidisse intellegat et, vitae fabulas consulatu eum an, vis te justo noluisse. [Beautiful Button](https://www.toujou.de/service/element-library/teaser-elements/image-teaser-slider-right/) - ![](https://www.toujou.de/_assets/processed/C852g7N1OWHeCWus0m5UtBIS_AcrtpW3N3-aB1DSixY/q:85/c:1920:1185.1851851852:fp:0.5:0.5/rt:force/w:448/h:277/fn:Y3NtX2RlbW9fMDRfZDMzODliNTk3Zg:t/cb:d341a5b87235ae104e74616f123b82a6111a3ffd/bG9jYWw6L2ZpbGVhZG1pbi90b3Vqb3UvZGVtby9kZW1vXzA0LmpwZw) Lorem ipsum dolor sit amet, mollis vocibus at cum. Eos te iriure epicurei, in pri iisque eligendi. Et has recusabo sapientem, usu delectus recteque accusamus an. In doming luptatum vis, voluptua democritum mel at. Mei aeque vidisse intellegat et, vitae fabulas consulatu eum an, vis te justo noluisse. [Beautiful Button](https://www.toujou.de/service/element-library/teaser-elements/image-teaser-slider-right/) - ![](https://www.toujou.de/_assets/processed/XFQF79NVGuYwgXfQoUM851HDXDVrjN-8Nm77Ap1kj5Q/q:85/c:1920:1185.1851851852:fp:0.5:0.5/rt:force/w:448/h:277/fn:Y3NtX2RlbW9fMDZfYTZlOTY5ZTg1Mg:t/cb:a2cd21e93660599767b5483892eae8d0eef10416/bG9jYWw6L2ZpbGVhZG1pbi90b3Vqb3UvZGVtby9kZW1vXzA2LmpwZw) Lorem ipsum dolor sit amet, mollis vocibus at cum. Eos te iriure epicurei, in pri iisque eligendi. Et has recusabo sapientem, usu delectus recteque accusamus an. In doming luptatum vis, voluptua democritum mel at. Mei aeque vidisse intellegat et, vitae fabulas consulatu eum an, vis te justo noluisse. [Beautiful Button](https://www.toujou.de/service/element-library/teaser-elements/image-teaser-slider-right/) of --- Step by step guide -------------------- [ ![](https://www.toujou.de/_assets/processed/o7CwmItGoKyYa3ycdp4gDVIOQXzinjb4fohvsZXUlf0/q:85/c:1092:545.86466165414:fp:0.5:0.43609022556391/rt:force/w:432/h:216/fn:Y3NtX2ltYWdlX3NsaWRlcl90ZWFzZXJfZW5fNzM1ODhhMjU2MQ:t/cb:41cb5beddff32b14b3e9d93752cfd7165e9cfcb2/bG9jYWw6L2ZpbGVhZG1pbi90b3Vqb3UvZWxlbWVudF9saWJyYXJ5LzAyX1RlYXNlcl9lbGVtZW50cy9pbWFnZV9zbGlkZXJfdGVhc2VyX2VuLnBuZw) ](https://www.toujou.de/fileadmin/toujou/element_library/02_Teaser_elements/image_slider_teaser_en.png) ### Create a teaser slider - Click on the **+ Content** button to create any teaser element. - In the *Teaser Elements* tab, select the **Image-Teaser Slider, right**. [ ![](https://www.toujou.de/_assets/processed/lqWmrtK3BqsE2bRUMfKtTVmrciRXjGpo_-JJWS76RqI/q:85/w:432/h:219/fn:Y3NtX2ltYWdldGVhc2Vyc2xpZGVyLWxlZnQtZWxlbWVudC1vcHRpb25zXzg0YjBlMTcxZDQ:t/cb:f390a0ba3a029e0e5b8da621590aae46e71da36f/bG9jYWw6L2ZpbGVhZG1pbi9NYW51YWwvMDJfVGVhc2VyX0VsZW1lbnRzLzAyLTAwNi1pbWFnZS10ZWFzZXItc2xpZGVyX2xlZnQvaW1hZ2V0ZWFzZXJzbGlkZXItbGVmdC1lbGVtZW50LW9wdGlvbnMucG5n) ](https://www.toujou.de/fileadmin/Manual/02_Teaser_Elements/02-006-image-teaser-slider_left/imageteaserslider-left-element-options.png) ### Creating slides - In the *Header* field, enter a title, which will be displayed as an H3 heading. - Click the **Create New** button in the *teaser* section to create multiple teasers. - In the *Slider Settings* you can enable maintaining the aspect ratio of media elements by clicking the **checkbox**. Refer to the [note below](https://www.toujou.de/service/element-library/teaser-elements/image-teaser-slider-left/#c1017052) for more details. - In the *Color* section you can define the display color of arrows and progress bar bullets. [Element design colors](https://www.toujou.de/service/element-library/teaser-elements/image-teaser-slider-left/#c1017054) are available for selection. [ ![](https://www.toujou.de/_assets/processed/ggdQFW3VcE681Ve-d_3FhznvBbbQpVN5yBcSTL7aoRk/q:85/w:432/h:219/fn:Y3NtX2ltYWdldGVhc2Vyc2xpZGVyLWxlZnRfdGl0bGUtdGV4dF9kNzlkOGQ4YzU0:t/cb:cbf38ce677bef6a8d6666af011231b12f8630ec4/bG9jYWw6L2ZpbGVhZG1pbi9NYW51YWwvMDJfVGVhc2VyX0VsZW1lbnRzLzAyLTAwNi1pbWFnZS10ZWFzZXItc2xpZGVyX2xlZnQvaW1hZ2V0ZWFzZXJzbGlkZXItbGVmdF90aXRsZS10ZXh0LnBuZw) ](https://www.toujou.de/fileadmin/Manual/02_Teaser_Elements/02-006-image-teaser-slider_left/imageteaserslider-left_title-text.png) ### Insert slide title and text - You can specifiy the title for each slide in the *Title* field. - Enter your text in the *description text* field. If you're copying text from another file, be mindful of any formatting that may be carried over. You can format the text directly in the text field using the menu above it. [ ![](https://www.toujou.de/_assets/processed/lHdhjVHCApBLqwEmpOpNlAHGd5zAW_u6Ee0n2UAP0Gc/q:85/w:432/h:219/fn:Y3NtX2ltYWdldGVhc2Vyc2xpZGVyLWxlZnRfbWVkaWFfZWY4MDc5YThhYw:t/cb:5b2c09d953df5962f13715367159b909e593f6e9/bG9jYWw6L2ZpbGVhZG1pbi9NYW51YWwvMDJfVGVhc2VyX0VsZW1lbnRzLzAyLTAwNi1pbWFnZS10ZWFzZXItc2xpZGVyX2xlZnQvaW1hZ2V0ZWFzZXJzbGlkZXItbGVmdF9tZWRpYS5wbmc) ](https://www.toujou.de/fileadmin/Manual/02_Teaser_Elements/02-006-image-teaser-slider_left/imageteaserslider-left_media.png) ### Insert media - Click on the **Add Image** button. - Select a file from your file list or upload a file to the corresponding folder. --- Screen adaption ----------------- **The *Image-Teaser Slider, right*, offers you the ability to display several teasers in a »loop«. Each teaser still needs to be created individually.** **Responsive**: If there is not enough space to display the text block and the media next to each other, any teaser media will be placed above the text block. Also, regardless of the original orientation, teasers will always be displayed correctly on small screen devices. --- Linked topics ------------- [toujou set-ups](https://www.toujou.de/service/toujou-set-up/) & [TYPO3 tutorials](https://www.toujou.de/service/tutorials/) related to this element description. [Text editing](https://www.toujou.de/service/tutorials/page-content/text-editing/) [Image editing](https://www.toujou.de/service/tutorials/page-content/image-editing/) [Filelist](https://www.toujou.de/service/tutorials/file-list-module/)