SUYP is one more JS tool that helps you to create slideshow. The goal is to make something flexible, easy to customize, ready to use...
See exemple.html for a full exemple, but in short you have to :
- load suyp.css that defines some basic CSS rules • easy to customize
- load suyp.js
- instanciate the class like that :
suyp = new Suyp( $('#suyp'), {
'slides': picturesUrl, // Array of urls
'crop': true, // true -> cover, false -> contain
'mode': 'slide-h', // Transition mode -> String
'auto': true, // Automatic slider ?
'pictureDisplayTime': 1750, // Display time of each picture -> Number (ms) ex : 1000 = 1 sec
'transitionDuration': 750, // Duration of the transition between picts -> Number (ms) ex : 1000 = 1 sec
'transitionDelay': 250 // Delay between hiding the current pict and strat to display the prev / next picture -> Number (ms) ex : 1000 = 1 sec • NB : can be negative values
}); Improvements...Improvements everywhere.
All the pugs picture are from unsplash.com under Do Whatever You Want licence.
To be precise :