Slick Slideshow - Fullscreen

Hi foks

If Using Slick Template, here is an example of how you can use it to create a slideshow that covers the whole screen, regardless off width.

An idea might be a slideshow of images behind your content...

The way to do that is render the image as a background-image of an element (<div>) rather than as <img />

STEP 1

Use 'Typo' AKA '2' in your 'List' View.

Do something like this:

<div class="image-background" style="background-image: url($cck->getValue('art_fulltext_image'));">
</div>

and then the css:

.image-background {
  width: 100%; // or maybe 100vw
  height: 100vh; // make sure whole of window is covered
  background-position: 50% 50%; // center the image
  background-size: cover; // cover, not contain!
}

That takes care of the list.

Then wrap this Slick List in a div using a class name like '.wrapper' like this:

.wrapper {
  width: 100%; // the window width 
  position: fixed; // crucial, this keeps it in one place, scrolling has no effect
}

You can add this class to the Template setting:

⇒ Global

 - Wrap Class (CSS) <- add the class of 'wrapper' here //  Near the top of all the options (no need to add the quotes)

Jon