javascript - jQuery slider with setInterval not working correctly with fadeIn on pageload -

i trying create simple jquery based slider fadein on pageload. have problems cycling of script after first time.

here javascript code:

    function slideshow(isfirst) {         if(isfirst) {             $('#slider_img_1').delay(1500);         }         $('#slider_img_1').fadein(2000).delay(1000).fadeout(2000); // 6500         $('#slider_img_2').delay(5500).fadein(2000).delay(1000).fadeout(2000); // 10500         $('#slider_img_3').delay(9500).fadein(2000).delay(1000).fadeout(2000); // 14500     }      $(document).ready(function() {          slideshow(true);         setinterval("slideshow(false)",14500);      }); 

as can see add delay img_1 first cycle. in second cycle loop through slideshow again same duration total cycle should take.

but goes wrong when interval starts, first gap widespread delays.

based on arun's fiddle: https://jsfiddle.net/h2jwqhom/2/

instead of trying synchronize separate intervals, it's easier work slide slide. can accomplished getting next slide on each run:

var sliders = $('.slider_img') //obtain slide collection    , cur = 0; //indexer slides  function slideshow() {         var $slider = $(sliders[cur++]); //get slide show     if(cur>=sliders.length) cur=0; //check if next slide within bounds     $slider.fadein(2000).delay(1000).fadeout(2000); //animate     settimeout(slideshow,3500); //start next slide before fadeout finishes }  $(document).ready(function () {     settimeout(slideshow, 1500); //start slideshow after 1500 msecs     }); 

fiddle

as side note, if ok let fadeout finish completely, $slider.fadein(2000).delay(1000).fadeout(2000, slideshow); instead of using settimeout, reckoned goal transition without fading out completely.