Question

I’m trying to make a basic image slider in jquery, tried following code:

<div id="Photos">
    <img alt="First" src="../../Images/9-10-2012 2-59-52 PM.png" class="Show"/>
    <img alt="Scond" src="../../Images/9-10-2012 3-00-20 PM.png" />
    <img alt="Third" src="../../Images/9-11-2012 11-56-09 AM.png" />



</div>

<script type="text/javascript">
    $(document).ready(function () {
        slideshow(); 
    });

    function slideshow() {
        var current = $('#Photos.Show');
        var next = current.next().length ? current.next() :   current.parent().children(':first');
        current.hide().removeClass('Show');
        next.fadeIn().addClass('Show');

        setTimeout(slideshow, 3000);
    }

</script>

Its not sliding, even all three images showing at a time constantly. Please help. Thanks.

Answer 1

modify the below line.

var current = $('#Photos .Show');

Add spacing in-between.