EverWeb Widgetbox

Maxi Slider

Create a full size, responsive slider which can be viewed full screen. Click the Maxi Slider icon to view the demo and click the Back button to return to this page.

Background Image Slideshow Caption
Background Image Caption Slideshow
Maxi slider back button

The Widget

Create a blank page with no content. Set the page height to about 200px and the header and footer to zero.

Drag the widget onto the page, select the images and highlight each one in turn in the Assets List to enter a caption.

Select the desired caption font family, size and color.

Set the slide time, transition time and transition type. The slide time can be set to 60 seconds or more so that the visitor can have more time to view the images and navigate using the pager dots instead.

The visitor can be sent to the slider via a text or image hyperlink and returned to the parent page by using the browser "Back" button or by inserting a button or text link on the slider page.

There are six transition types:

0-None, 1-Fade, 2-Slide Top, 3-Slide Right, 4-Slide Bottom, 5-Slide Left

The image below shows how the widget appears on the page along with the back button used in the demo.

This button is created using HTML and CSS rather than use an image and the code is shown below.

Paste this code into an HTML Snippet to create a back button...

<div style="width:28px;height:28px;background:rgba(0,0,0,0.3);padding:7px;border-radius:7px;margin:0">

<a href="page-name.html"><div style="width: 0;height: 0;border-top: 13px solid transparent;border-bottom: 13px solid transparent;border-right:24px solid #0593FF"></div></a>


Change the transparency by altering the number marked in magenta. The range is 1 to 9 where lower is more transparent.

Enter the path to the parent page - marked in red.

Change the Hex Color Number  - marked in blue - to the required value.

Get The Widget

Stop The Slider

An extra control has been added to stop the slideshow from looping.

When the box is unchecked, the slider will run through all the slides and then stop.

At this point, the visitor can then navigate the slides manually using the pager dots.