Full screen slideshow with Adapativetheme, Flexslider and Views

Rating

Webdesigners like full screen slideshows on their frontpage

This tutorial deals with the full screen slideshow in the Drupal 8 Adaptive Theme and Flexslider module.

Let's start...

Installation of the theme see AT Tootls module.

In AT you can configure the width of the different regions.. 

Stel de breedte van het leaderbord in op 100%

 

Installation of the flexslider

Be sure to activate the "Flexslider view style".

First of all, you need to make a new option set for the Flexslider or change the default settings. Configuration => media => Flexslider. Give it the name 'Frontpage' slider.

Flexslider seems only responsive if the transmission is on fade. Don't use the next/previous controls en use no paging.

Making a image style

give it the name 'frontpage slider'

scale on 2600 X 2600 px

Making the content type

Add  a new content type named 'Frontpage slider'

Delete the body field.

Add an image field limited to 1 image. Max resolution 2600 X 2600 px

Add some nodes
 

Making the view

Make a flexslider block called 'frontpage slider'
Don't limit the items.
 

Maak een nieuwe view aan

 

Overzicht view instellingen

Select the option set we created in the flexslider settings.

Flexslider settings

Add the image field to the view

Vieuw overzicht compleet

 

Place the block

Structure -> Blok-layout place the block in the leaderboard section
Hide the title en make sure the block in only visible on the frontpage.

Blok plaatsen via structuur blok-layout

Remove user-menu from the leaderbord section

CSS

Add the following css code to your theme stylesheet to make the slideshow to always fit your browser window.

css

This should be the end result.

Eindresultaat

We also made a screencast. See the Youtube movie below. (spoken in Dutch)

Externe film