To add a section of where a list if image media entities fade in and out, you will need to create add the image you what to use to the WYSIWYG, then view the WYSIWYG's source and add an opening div tag with a class of fadeInBanners before the first image, close the div, by adding a closing div after the last image.

Opening div with class fadeInBanners

<div class="fadeInBanners">

Closing div after last image

</div>

Recommended image sizes: 1920 x 480 or 1056 x 264

Demo of Fade in banners

Below is the source view of the above demo.


<div class="fadeInBanners">

<drupal-media data-align="center" data-entity-type="media" data-entity-uuid="839a6bab-d75d-412d-bc35-10bd3e5bdf2e" data-view-mode="full"></drupal-media>

<drupal-media data-align="center" data-entity-type="media" data-entity-uuid="0870a018-04a8-4644-838a-6bac6ff48eed" data-view-mode="full"></drupal-media>

<drupal-media data-align="center" data-entity-type="media" data-entity-uuid="a8833c25-1763-4753-94f3-610a82576902" data-view-mode="full"></drupal-media>

</div>

Demo of Fade in banners with a full width container class

Adding the UCT-fullwidth-container from the general-fullwidth-container Additional library, can make this stretch the full width of the site, note this requires that you added the Additional library to the page and remove the aside navigation.

Below is the source view of the full width container demo above.


<div class="fadeInBanners UCT-fullwidth-container">

<drupal-media data-align="center" data-entity-type="media" data-entity-uuid="839a6bab-d75d-412d-bc35-10bd3e5bdf2e" data-view-mode="full"></drupal-media>

<drupal-media data-align="center" data-entity-type="media" data-entity-uuid="0870a018-04a8-4644-838a-6bac6ff48eed" data-view-mode="full"></drupal-media>

<drupal-media data-align="center" data-entity-type="media" data-entity-uuid="a8833c25-1763-4753-94f3-610a82576902" data-view-mode="full"></drupal-media>

</div>