Ako ste u potrazi za ultra jednostavnim slider-om slika onda je ovo prava stvar za vas. Jedino što je potrebno imati je:

<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 - je kontenjer u kojem se nalazi čitav slider
• slider_back - je kontenjer u kojem se nalaze sve slike johe želite prikazivati
• slider_img - je klasa slike koju morate dodati svakoj slici

Osim toga, potrebna vam je i malo jquery koda. Jedino što možete promijeniti po želji je timeBetweenSlides varijablu koja služi za određivanje vremena pojavljivanja slika i trenutno je postavljena na 4 sekunde.

    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);
        }
      }


    };

Funkcionalan kod možete vidjeti na primjeru ispod: