--- title: Image-Teaser Slider, left url: "https://www.toujou.com/service/element-library/teaser-elements/image-teaser-slider-left/" date: 2024-01-08 modified: 2024-01-08 --- # Image-Teaser Slider, left 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, left](https://www.toujou.de/service/element-library/teaser-elements/image-teaser-slider-left/) Image-Teaser Slider, left ========================= A selection of several teasers in a slider with one media source (original format) displayed on the left and the text displayed on the right. [Sample view](#c1017060) [Step by step guide](#c1017058) [Screen adaption](#c1017053) --- 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) ### Standard Design 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. - ![](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) ### Primary Design 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. - ![](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) ### Secondary Design 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. - ![](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) ### Inverted Design 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. of --- Step by step guide -------------------- [ ![](https://www.toujou.de/_assets/processed/gnnlb_XIDfVcGp3B40ziXQVqxbb_iNgMvWHOO_hv0XY/q:85/w:432/h:219/fn:Y3NtX2ltYWdldGVhc2Vyc2xpZGVyLWxlZnQtY3JlYXRlLWVsZW1lbnRfMGYzYmIwM2M3ZQ:t/cb:435003894616d511a4b4fe2b1f6958bf8f633237/bG9jYWw6L2ZpbGVhZG1pbi9NYW51YWwvMDJfVGVhc2VyX0VsZW1lbnRzLzAyLTAwNi1pbWFnZS10ZWFzZXItc2xpZGVyX2xlZnQvaW1hZ2V0ZWFzZXJzbGlkZXItbGVmdC1jcmVhdGUtZWxlbWVudC5wbmc) ](https://www.toujou.de/fileadmin/Manual/02_Teaser_Elements/02-006-image-teaser-slider_left/imageteaserslider-left-create-element.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, left**. [ ![](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](#c1017052) for more details. - In the *Color* section you can define the display color of arrows and progress bar bullets. [Element design colors](#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, left* gives you the ability to showcase multiple teasers in a loop. Each teaser is individually created and can be displayed in various colors using the Element Design.** In den Slider-Einstellungen *Farbe* (unter dem Reiter Allgemein) können Sie auch die Slides-Pfeile und Progress Bar Bullets mit dem Element Design variieren. Die Bullets (Sliderbuttons) befinden sich am unteren Abschluss des Elements und zeigen zugleich die Anzahl der Slides an. In the Slider settings for color (in the General tab), you can also customize the slide arrows and progress bar bullets using the Element Design options. The bullets (slider buttons) are located at the bottom of the element and also indicate the number of slides. **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/) [Media editing](https://www.toujou.de/service/tutorials/page-content/image-editing/) [File list](https://www.toujou.de/service/tutorials/file-list-module/)