Slideshow Header

The header consists of a panel with options for a logo, headings and links to the left and a slider to the right. The widget has a maximum width setting to stop the panel and the slideshow images getting too wide when viewed on computers. The color of the background exposed on each side of it can be set to the same as the panel background to make the whole thing cohesive.
As the viewport is reduced in width, the items will respond until the CSS media query break point is reached. Then the slider switches position to below the panel.
Slideshow
The slideshow images are added using the EverWeb Widget API Assets List. The images can have alt text for the search engines and captions and links can be turned on globally.
Links can have a relative or absolute file path to open internal or external pages and in a new tab or window if required.
The captions overlay the images. They are centered at the bottom and have a background color with adjustable opacity.
Slider Options
The slideshow is navigated using arrows. These can be turned off for when the page is viewed on a touch device to be replaced by swiping.
The transition can be either slide or fade and the transition time is entered in milliseconds.
The slideshow can be made to autoplay by checking a box and entering the required slide time in milliseconds. Since continuous autoplay should be avoided for sliders which will be used on mobile devices, this one has the option to autoplay once through the slides and stop at the last one.
Panel
The optional logo has controls for selecting the image, setting its size and positioning it in relation to the top and left of the panel.
The h1 heading is obligatory and the h2 heading is on option.
One or two CTA style links can be inserted and these are configured to open internal pages only. They can have a hover color when viewed on computers and radiused corners if required.
The panel items can use a web safe font or a non web safe or Google hosted font with a web safe fallback and there is a control for spacing them out vertically.
Navigation
The header can be used in conjunction with one of the responsive navigation widgets. In this case, the navigation is placed above the header.
The header widget incorporates the "hamburger" icon which opens and closes the mobile version of the navigation. This is turned on in the widget settings when required and set for icon color and background color.
Mobile Settings
There are controls for setting the panel height when viewed on tablets and another for when viewed on phones. The font size of the h1 and h2 headings can be set smaller for phones.