CSS PLAY

Responsive Swiper - The Most Modern Mobile Touch Slider, using html5 <picture> and Font Awesome for controls.

25th January 2017

My default image

Photograph #1

A street performer around Bath Abbey.

My default image

Photograph #2

A street performer around Bath Abbey.

My default image

Photograph #3

A street performer around Bath Abbey.

My default image

Photograph #4

A street performer around Bath Abbey.

Information

Swiper is probably the best slideshow available on the web today.

In this slideshow I demonstrate how to use 'Swiper' with the html5 <picture> element to serve up three different images for each slide depending on the size of the browser window.
It also demonstrates how to have the left/right controls and bullets outside of the images and update the 'Swiper' parameters using breakpoints when the browser window is below a certain size. In this demo I remove the left/right arrows when viewed on mobiles with a width of 480px or less and have the images occupy the space taken up by the arrows.

The Slider slideshow can be controlled using touch, mouse and keyboard so should work in all the latest browsers and devices.

I have also replaced the standard 'Swiper' left/right controls with 'Font Awesome' icons that can be resized and colored using CSS.

Each slide has an overlay of dots and text which can be used to describe each image.

All photographs © Stu Nicholls - cssplay.co.uk


Download
Including images