Zayn Ali Zayn Ali - 4 months ago 17
jQuery Question

Show images in a slider using jquery

I'm making a simple jquery slider. My code is given below. Please tell me how to
show the images of some id that I have inserted in a div of class slider. my jquery code is not working.

the css code:

.slider {
width:800px;
height:300px;
overflow: hidden;
margin: 30px auto;
background-image: url(img/loader.gif);
background-repeat: no-repeat;
background-position: center;
}

.shadow {
background-image: url(img/shadow.png);
background-repeat: no-repeat;
background-position: top;
width: 1400px;
height: 128px;
margin: -55px auto;
}

.slider img {
width: 800px;
height: 300px;
display: none;

}


the jquery code

$(document).ready(function() {
$('.slider #1').fadeIn(2000);
});


html

<div class="slider">
<img id="1" src="img/1.jpg" border="0" alt="Intro" />
<img id="2" src="img/2.jpg" border="0" alt="Course" />
<img id="3" src="img/3.jpg" border="0" alt="My Slider" />
</div>
<div class="shadow"></div>

Answer

Working Slider FIDDLE:

JQUERY:

$(function () {
    $('.slider img:gt(0)').hide();
    setInterval(function () {
        $('.slider :first-child').fadeOut()
            .next('img').fadeIn()
            .end().appendTo('.slider');
    },
    3000);
});
Comments