close

Filter

loading table of contents...

Frontend Developer Manual / Version 2201

Table Of Contents

6.4.2 Example Carousel Banner

The brick provides templates and CSS styles for displaying many content types and commerce objects as a carousel banner. The example is based on the API brick Section 6.3.1, “Default-Teaser” and Section 6.3.11, “Slick Carousel”.

Wireframe for carousel-banner on desktop

Figure 6.14.  Wireframe for carousel-banner on desktop


Wireframe for carousel-banner on mobile

Figure 6.15.  Wireframe for carousel-banner on mobile


  1. The shop-now button feature is utilized.

  2. Teaser title and teaser text are shown. For products the list price and (if existing) the offer price is shown.

  3. If necessary the items will be displayed as a carousel with arrows. For mobile devices there is touch support to control which item is shown.

The banner supports a corresponding view type "carousel" which can be used for placements and collections. If more than one item is in the same container as carousel, they will be displayed as a carousel showing multiple items at once based on the available screen size. It has arrows and touch support to control which items are shown. The visual output of the carousel is decided by the content assigned to it, for example, teaser, image-maps, video, product, category...

Using the Brick

As shown in the example below, a carousel banner can be displayed by including the corresponding content type with the asCarouselBanner view.

  <@cm.include self=self view="asCarouselBanner"/>
  

The same view is defined for containers (for example, a CMCollection or Placement) to render multiple items inside a carousel.

Video Behavior

The carousel banner will render a picture linked to the banner item or an empty placeholder and play the linked video in a popup (only if the popup brick is enabled). The video will automatically start to play as soon as the popup is opened. You can hide the controls and mute or loop the video by setting the corresponding video options in CoreMedia Studio.

Search Results

Table Of Contents
warning

Your Internet Explorer is no longer supported.

Please use Mozilla Firefox, Google Chrome, or Microsoft Edge.