javascript - Slider starts on second image -

i'm using slider created myself of people of stackoverflow community.

the problem have slider starts second image, not first.

i'm starting 0, don't know problem, ideas?

this script:

    function slider(sel, intr, i) {         var _slider = this;         this.ind = i;         this.selector = sel;         this.slide = [];         this.slide_active = 0;         this.amount;         this.timer = null;         this.selector.children('img').each(function (i) {             _slider.slide[i] = $(this);             $(this).hide();         });          //display buttons , register events         $(this.selector).hover(         function () {             $(this).append('<div id="previous-slider-' + + '" class="previous-arrow arrow"></div>');             $(this).append('<div id="next-slider-' + + '" class="next-arrow arrow"></div>');             $('#next-slider-' + i).click(function () {                 _slider.next();             });             $('#previous-slider-' + i).click(function () {                 _slider.previous();             });         },         function () {             //remove buttons , events             $('.arrow').remove();         });          this.run();     }            slider.prototype.run = function () {         this.next();     }     slider.prototype.next = function () {         var _s = this;         _s.show(1);/*     */     }     slider.prototype.previous = function () {         var _s = this;         _s.show(-1);     }     slider.prototype.show = function (shift) {         var _s = this;         _s.slide[_s.slide_active].fadeout(300, function () {             _s.slide_active = (_s.slide_active + shift < 0) ? _s.slide.length - 1 : (_s.slide_active + shift) % _s.slide.length;             _s.slide[_s.slide_active].fadein(300)         });     }      var slides = [];     $('.slider').each(function (i) {         slides[i] = new slider($(this), i);     }); 

this script of thumbs:

    $('.box').each( function(n){         $(this).attr("target","galeria" + n);     });      $('.slider_box').each( function(n){         $(this).attr("id","galeria" + n);     });      $('.box').click( function() {         var toload = $(this).attr("target");         $('.modal_container').fadein();         $('.slider_box#'+toload).fadein();     }); 

cant use jsfille hereś solution code

    function slider(sel, intr, i) {         var _slider = this;         this.ind = i;         this.selector = sel;         this.slide = [];         this.slide_active = 0;         this.amount;         this.timer = null;         this.selector.children('img').each(function (i) {             _slider.slide[i] = $(this);             $(this).hide();         });          //display buttons , register events         $(this.selector).hover(         function () {             $(this).append('<div id="previous-slider-' + + '" class="previous-arrow arrow">previous</div>');             $(this).append('<div id="next-slider-' + + '" class="next-arrow arrow">next</div>');             $('#next-slider-' + i).click(function () {                 _slider.next();             });             $('#previous-slider-' + i).click(function () {                 _slider.previous();             });         },         function () {             //remove buttons , events             $('.arrow').remove();         });          this.run();     }     slider.prototype.run = function () {         var _s = this;         _s.show(0);        _s.timer = setinterval(function () {         _s.next();        },interval);     }     slider.prototype.next = function () {         var _s = this;         clearinterval(this.timer);         _s.show(1);         this.timer = setinterval(function () {             _s.show(1);         }, interval);     }     slider.prototype.previous = function () {         var _s = this;         clearinterval(this.timer);         _s.show(-1);         this.timer = setinterval(function () {             _s.show(1);         }, interval);     }     slider.prototype.show = function (shift) {         var _s = this;         _s.slide[_s.slide_active].fadeout(300, function () {             _s.slide_active = (_s.slide_active + shift < 0) ? _s.slide.length - 1 : (_s.slide_active + shift) % _s.slide.length;             _s.slide[_s.slide_active].fadein(300);         });     }      var slides = [];     var interval = 3000     $('.slider').each(function (i) {         slides[i] = new slider($(this), interval, i);     });slider.prototype.previous = function () {         var _s = this;         clearinterval(this.timer);         _s.show(-1);         this.timer = setinterval(function () {             _s.show(1);         }, interval);     }     slider.prototype.show = function (shift) {         var _s = this;         _s.slide[_s.slide_active].fadeout(300, function () {             _s.slide_active = (_s.slide_active + shift < 0) ? _s.slide.length - 1 : (_s.slide_active + shift) % _s.slide.length;             _s.slide[_s.slide_active].fadein(300);         });     }      var slides = [];     var interval = 3000     $('.slider').each(function (i) {         slides[i] = new slider($(this), interval, i);     });