A common feature of many web sites is a slide show. They have become so common and so similar, that they are a yawn. There are literally thousands of plugins for slide shows. They all work pretty much the same, and bloat the pages. They are also BORING.
They all have the same boring features. Everyone uses the same boring effects. How about multiple sliders? Just more bloat, and more boring crappy pages. Spice it up with flash or video? That just adds crap to crap. You can't save a page by adding bloat.
We are Going to do a Round Element With an Iris for Our Slideshow
Start here: Now close it Do a slide show:
It may appear that there is an extra div "outer"; but it is essential to wrap the div with the effect. It carries a critical style to set min-height. Without it both Chrome and Firefox are a little twitchy at the bottom of the iris and cause the following content to do 1 px shifts during the transitions. For some reason they keep trying to re-size the slide. A bug in both the Gecko and Blink rendering engines I guess. The IE rendering engine Trident does not have the same problems on any version of IE9+ which is a real surprise because you expect IE to be the problem child for dynamic effects.
To stop the rotation we fire a clearLoop() function that can be as simple as setting the doingAll flag to false or much more complicated to reset all the default values. The complexity depends on how you implement it and integrate it into your page.
The code here is just some of the functionality; not a complete implementation. For the full code use the link at the bottom of the page to get the complete code in a plain text file that includes the event listeners used to fire functions when the buttons are clicked. You don't have to use the buttons for control.
If you want it to run automatically when the page loads, you can fire it off of the onload event. The code is even easier to implement for that because you don't need functions to manage the buttons or a lot event listeners. However It is still a good idea to have a button or link to allow the user to stop the effect; or even remove it because some users may consider it a distraction; especially if they are using a browser with the twitch problem.
Play with the Borders
Okay that is a little different. What else can we do? We can alter the look by playing with the borders like we do in this snippet: Border options for round slide shows
Round is Not the Only Alternate Shape
So let's take the next step and add some additional shapes using this snippet: Alternate Iris Shapes
Sliding Through the Shape
For presentation purposes, you might want to use a shape but actually just cycle through the images without using the Iris. The controlled slow slide looks difficult, but with sprites it is actually child's play if you do your slider your way
Closing the Slide Show
For some implementations you might want to end the slide show at some point. You can:
- End by displaying a default final image
- Just stop the rotation after a time limit or number of rotations
- Hide the slider
... OR ...
You can do something a little different with different ways to close the slide show
A file with all the code used in this article and the supporting snippets is available for download here. If you are going to implement this type of presentation, you need the download for the full code. If you try to work from just the example code you will get frustrated by not having the tiny bits and pieces that glue it together. Yes, you actually need to do some coding. This site is here for professionals and those who want to become professionals; not wannabes who are looking for plugins that don't require them to do any work. Try out the code and don't be afraid to experiment. Avoid the boring!
Why would anyone who is not an imbecile use bloated crapware that is unreliable, difficult to maintain, and a possible source of malware? If you are not willing to learn how to code well enough to implement effects using CSS along with a little scripting please go find a job driving a taxi or flipping burgers because the Internet does not need any more wannabes spewing out sites that are all the same unimaginative junk that makes maggots puke.[/Rant]
If you found this article helpful you might also be interested in: