Switch Slider

While the hero slider is popular and looks good when viewed on computers and tablets in landscape mode it is not suitable for narrower screen widths where only the center of the image will be in view.
Above the break point the slider has a fixed height which is set in viewport units rather than pixels. Below the break point the images have responsive width and height for a better viewing experience on mobile devices.
Images
Although the images are lazy loaded their size should be kept to a minimum and a maximum number of slides for this application should be no more than six.
Slider Height
When in fixed height mode the height of the slideshow stage is set in viewport units (vh). Using viewport units makes the slider accupy the same relative height no matter what the height of the browser or screen width is. The demo slider has a height of 70vh so it will occupy 70% of the browser or device screen height.
The height can be set to 100vh to fill the height of the browser or device window.
Slideshow Options
The transition can be slide or fade and the transition time is set in milliseconds.
Autoplay
Autoplaying slideshows are really irritating and will cause most visitors to scroll them out of view so that they can focus on the rest of the content. Autoplay is definitely not welcomed by mobile users. because the slideshow still plays even when out of view and is draining the device's battery.
To overcome the problem of a client insisting on autoplay the slideshow can be set to autoplay by entering the slide time in milliseconds. There is a checkbox to allow the slides to autoplay and then stop at the last one. For this to happen, loop is disengaged but the visitor can still use the previous arrows to go back through the slides if they really want to see them again..
Navigation
The images are lazy loaded and are navigated using the directional arrows or grab and drag on computers. The arrows are inserted at the bottom right for ease of use.
The arrows can be hidden on mobile devices where the images are swiped.
Captions & Links
The optional captions are centered horizontally and can be placed at the top or bottom of the image.
Links can open internal of external pages and have a new window option.