Carousel - Full Screen

Instructions with an Exercise

About the "Full-Screen Carousel" Content Element

With the Full-Screen Carousel, you can display multiple images as an animated carousel with image transitions across the full width of the page.

TYPO3 provides a feature for this:

Usage:

The Full-Screen Carousel content element is typically placed at the top of a website.

Using the Full-Screen Carousel is particularly useful when

  • you want to create an emotional, atmospheric effect.
  • a representative presentation is desired, e.g., for a project showcase.
  • particularly appealing images are to be displayed.
  • it is a home page or an information page.

This element should be used sparingly so as not to diminish its impact.

Please note:

  • You should already know how to insert images into the file list. →Instructions for Uploading Files
  • Avoid using images of different sizes, as all images will be resized to the same dimensions.
  • Any text in the image must be included in the alternative text.
  • Using more than six images is not recommended.

These instructions will first show you how to add the "Full-Screen Carousel" content element.

Here's what it looks like

Live Preview of the Content Element


Step by step

Illustrated Instructions

Full-Screen Carousel Content Element

Step 1: Create a new content element

Select " Create New Content."

You can find the " Full-Screen Carousel " content element in two ways: under " Media" or under " Animated" or "Interactive."

Step 2: Add Carousel Elements

Under the " Carousel Element " section, select the " Create New " option.

You must now give the carousel element a name and create a relationship ( select an image).

Follow the instructions for uploading a file if you haven't uploaded any images yet.

If your images do not have alternative text , you must add it here.

Step 3: Additional Options and Results

Under the " Carousel Options " tab, there are now additional customization options, all of which are optional.

  • How many images should be displayed at the same time? → Choose between one and three images displayed simultaneously.
  • Enable automatic playback → Imageswill switch automatically.
  • Interval in ms → The speed of the image transition in milliseconds.

Here's what a possible outcome might look like

TYPO3 Self-Study for Beginners, Part 2

Exercise

Go to the sandbox.

  1. Create the " Full-Screen Carousel " content element and insert your own images.
  2. Now set it to display three images at once and have the images switch automatically.

Go to the Sandbox

Next:

 

Back to OverviewNext Topic