If you are looking for an ultra simple image slider, than this is the right thing for you. The only thing you need to have is:

<div class="image_slider">
    <div class="slider_back">
      <img class="slider_img" src="http://www.piersharding.com/download/slides/img/500x200.gif" />
      <img class="slider_img" src="http://www.piersharding.com/download/slides/img/500x200.gif" />
    </div>
</div>

• image_slider - is a container in which the entire slider is located
• slider_back - is a container that contains all the pictures you want to show
• slider_img - is the image class you must add to each image you what to slide

In addition, you also need to have some jquery code. The only thing you can chage as you like is the variable timeVetweenSlides. That variable is used for determine the time of image slides, and currently is set for 4 seconds.

    zSlider();

    function zSlider() {
      var timeBetweenSlides = 4000;
      var br = 0;
      var curSlide = 1;
      $(".slider_back .slider_img").each(function(index) {
        if (br == 0) {
          $(this).show();
        }
        br++;
      });
      timeout();

      function timeout() {
        console.log(curSlide);
        if (br > 1) {
          setTimeout(function() {
            $(".slider_back .slider_img:nth-child(" + curSlide + ")").fadeOut("400", function() {
              curSlide++;
              if (curSlide > br) {
                curSlide = 1;
              }
              $(".slider_back .slider_img:nth-child(" + curSlide + ")").fadeIn("400");
            });
            timeout();
          }, timeBetweenSlides);
        }
      }


    };

You can see the functional code in the example below: