Carousel

The carousel is based on the Spectre carousel and works entirely without JavaScript.

Place the wrapper elements

First you need an element of type Wrapper start (content slider) and Wrapper end. Select the template ce_sliderStart_carousel or ce_sliderStop_carousel for the content elements. The js_slider template does not need to be activated in the layout.

Wrapper start

Wrapper stop

Place the teaser box element

Inside the wrapper elements, place an element of type Teaserbox (under Contao Themes). Assign the template ce_cthemes_teaserbox_carousel to the content element. You can choose a headline, a text, a link and an image. For the image, select the image size Carousel to get the right size.

In the end, the structure of the elements should look like this:

Customize the appearance

By adding more classes you can change the text color and the look of the button. You make these settings in the Teaserbox element under Advanced CSS classes (at the very end).

To show the button with a black background and white text, select the class .btn-primary under button style.

Change the slide effect

Add the class fade to the element of type Wrapper start (content slider) to change the slide effect to a fade effect.

Example