Its been a long time since the last post. In this one, I’ll show you a very simple jquery slideshow with fade in & fade out effect. I’m posting this very basic jquery slideshow because few of my friends asked me to help out with a very simple fade in and fade out slideshow effect. They even try with others yet, sometimes becomes horrible even when they have a great one. Since then, i suggest them to use this very simple one.
Ok let’s start…
The Scripts & CSS
Line no. 1 is the jquery library file which helps to run any kind of jquery code or functionality. And the next one is the supporting file that is going to help us in rendering the fade in and fade out effect smoothly.
The next script
The speed of the effect can be set by the timeout variable. Its defined in milliseconds and the type can be ‘sequence’ or ‘random’. Finally, the containerheight variable is an optional. But its good to set.
The Last one
<li><img src="http://farm5.staticflickr.com/4131/5409723923_65d7a19720_z.jpg" alt="flower" /></li>
<li><img src="http://farm5.staticflickr.com/4141/5410335520_38f91023ed_z.jpg" alt="flower"/></li>
<li><img src="http://farm8.staticflickr.com/7098/7311892272_9ace964254_b.jpg" width="50%" height="50%" alt="chidambaram temple"/></li>
The images can be of any number and its enclosed by the ‘<li>’ tag. But as a reasonable number 5 is the normal one.
Its all over and works smoothly now in all the browser. 🙂
This is tested and works in:
P.S.: featured image courtesy: Nuvola Icon Pack by David Vignoni
Thanks for reading this post and as usual, I’m open to suggestion and critics (positive of course).
Do comment on!