Image Slider CSS and jQuery

Question

I need to make an image slider by making changes in the src of the img tag.

<div style="overflow : hidden; ">
    <img class="img-responsive" id="page-body-bg" src="images/ccbg1.jpg" style=" left : 0; display : absolute;">
</div>

The CSS snippet is

#page-body-bg
{
    width : 100%;
}

What i have tried is

setInterval(function() { 
  $("#page-body-bg").fadeOut(200, function() {
    $("#page-body-bg").attr("src","images/ccbg2.jpg");
  }).fadeIn(200);
}, 3000);

This is not slider but it fades out and then fades in again. (Apart from question : How can i remove the delay between fade in and fade out in above example.)

I am having difficulty in making slider by similar method.

Answer 1

Using many img tags allow you to fade images in the same time. In the exemple, I level up the fade transition speed to show you the effect.

Here is the elaborated answer : FIDDLE

This is a quick answer, there are many ways to do this more easily, but for our exemple, this is enought I guess.