Zayn Ali Zayn Ali - 1 year ago 60
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 {
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);


<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 class="shadow"></div>

Answer Source

Working Slider FIDDLE:


$(function () {
    $('.slider img:gt(0)').hide();
    setInterval(function () {
        $('.slider :first-child').fadeOut()