Creating a simple jQuery image slider
I am in the process of creating a simple image slider. The script works however it loads the second to last and last image/text at the same time on top of each other. It then takes about 7 seconds before it seems to oad the code and work.
http://project.josephmanning.com/jm Is the temp site while I develop the site.
HTML
- <div id="homeSlider">
- <div id="sliderWhole">
- <div id="slideShow">
- <div class="slideContainer show"><div class="textHover"><span><h5>O'Riada-McCarty-Manning Academy of Irish Dance</h5>Built with Wordpress, HTML/CSS, jQuery, Illustrator and Photoshop<br /><br /><a href="http://www.ommirishdance.com" target="_blank">Visit Site</a><br /><br /></span></div><img src="img/slider/omm.jpg" width="316" height="179" alt="" border="0" /></div>
- <div class="slideContainer"><div class="textHover"><span><h5>KC Feis</h5>Built with Wordpress, HTML/CSS, jQuery, Illustrator and Photoshop<br /><br /><a href="http://www.kcfeis.com" target="_blank">Visit Site</a></span></div><img src="img/slider/kcfeis.jpg" width="316" height="179" alt="" border="0" /></div>
- <div class="slideContainer"><div class="textHover"><span><h5>The Music Manning</h5>Built with Wordpress, HTML/CSS, jQuery, Illustrator and Photoshop<br /><br /><a href="http://www.themusicmanning.com" target="_blank">Visit Site</a></span></div><img src="img/slider/musicmanning.jpg" width="316" height="179" alt="" height="200" border="0" /></div>
- </div>
- </div>
- </div>
jQuery
- $(document).ready(function() {
- ////Slider////
- slideShow();
- });
- function slideShow() {
- var current = $('#slideShow div.show');
- var next = current.next().length ? current.next() : current.siblings().first();
- current.fadeOut('slow').removeClass('show');
- next.fadeIn('slow').addClass('show');
-
- setTimeout(slideShow, 7000);
- }
Thanks