Image
Image
Image

 

‌‌   ‌‌   ‌‌

Build a Fit-to-Fill Page Background Slideshow

 

With Slider Factory 1.0rc3+ and Responsive Image 1.5rc1+ we can build a page-covering background slideshow.
And this is how to do it:

Sections

You need a Wrapper Section, some Responsive Background sections and of course a Slider Factory section (the sole controller). Add them to your page and use Drag’n’Drop to build the arrangement shown in the following image.

Click on the Wrapper’s Options icon to open it’s Sections Attributes dialog box:

The slider’s Wrapper (1 Wrapper_section) needs the gpSlideWrapper class and the following style attribute set:

position:fixed!important; top:60px; left:0; right:0; min-height:calc(100% - 60px)!important;

 

When using a Booswatch Theme with a fixed, sticky header we set top:60px; and calc the height by subtracting the header's height.
Most other themes (also the Bootswatch SCSS themes coming with Typesetter 5) will only need top:0; min-height:100%;

With all Sticky Footer Layouts, we will also need to give the Slider_factory section the style attribute

bottom:auto; top:60px!important;

in order to stick it to the top ot the Slider. Otherwise the controller it will hide behind the page footer and you will have trouble accessing it for later editing!

Of course, your Responsive Background sections need appropriate imagery.
I decided to use some cool pics from unsplash.com here and give them a bright warm mood.
Credits to Dustin Lee, VĂ­tor Santos and Jo Szczeplanska.

 

Page Content

For most Themes the content sections following the Slider will need a style attribute

position:relative;

in order to show on top of the slideshow. You might also want to put them inside a Wrapper and set the style 

margin-top:2em; margin-bottom:2em; 

or so, to give it little more vertical spacing. But that’s a matter of taste.

 

Slider Factory settings

You can use any settings here. I used Slider Height 512px for the creation process - once the Wrapper has our defined min-height set via Section Attributes, this will be overruled . pause slider on hover should be unticked if you want your slideshow play automatically – otherwise it won’t since the slider covers the whole viewport and you will always hover it.

 

That’s all. Good luck fiddling!