CSS PLAY
Doing It With Style
Another little change from just CSS
This is a 'simple'css/jQuery slideshow, that uses very simple jQuery, CSS and HTML.
The jQuery file is just 6K and the CSS is just 16 lines.
The HTML is and outer div with a nested div holding the images, and four divs to hold the controls.
There are three options controlled by data attributes in the outer div:
data-swipe="true"
data-auto="true"
data-loop="true"
These can be set to false if they are not needed.
The controls can be restyled as you like and moved to any position on the page. These include a 'mouse and touch swipe'.
There are also CSS variables to set up the information for the layout:
:root {
--iSlideSpeed : 1000ms; /* speed of slide */
--autoTimer: 4000ms; /* auto time between slides */
--aspect:1280/850; /* aspect ratio of images */
--color:#fc0; /* bullet and arrow colors */
--currentColor:#0c0; /* current slide bullet color */
--gap:10px;
--gapColor :#fc0;
}
The --gap variable places a gap between the slides and uses a left/right border on the images which can be any color.
You can even use a border image for this.
The stylesheet for this demonstration is in the page <head> </head> and the script is http://www.cssplay.co.uk/menu/jquery/cssplay.min.js but if you use this, please keep my copyright comment with the stylesheet.
A donation for use of this demo would be very much appreciated.
Most of my demonstrations can be used without asking for permission. However, some will require email approval first. Just check each page for the copyright requirements before use.
If you are having problems integrating any of my demonstrations into your website then I now offer a service to fault find and correct any errors that you may have introduced. Please email me for more information.