javascript - スライダーは 2 番目の画像で開始します

Question

私は、stackoverflow コミュニティの何人かの人々の助けを借りて、自分で作成したスライダーを使用しています。

私が抱えている問題は、スライダーが最初の画像ではなく2番目の画像から始まることです。

私は0から始めているので、どこに問題があるのか​​ わかりません。何かアイデアはありますか？

これはスクリプトです：

    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 and register events
        $(this.selector).hover(
        function () {
            $(this).append('<div id="previous-slider-' + i + '" class="previous-arrow arrow"></div>');
            $(this).append('<div id="next-slider-' + i + '" class="next-arrow arrow"></div>');
            $('#next-slider-' + i).click(function () {
                _slider.next();
            });
            $('#previous-slider-' + i).click(function () {
                _slider.previous();
            });
        },
        function () {
            //Remove buttons and 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);
    });

これは親指のスクリプトです：

    $('.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();
    });

Answer 1

ここでjsfilleを使用できませんソリューションコード

    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 and register events
        $(this.selector).hover(
        function () {
            $(this).append('<div id="previous-slider-' + i + '" class="previous-arrow arrow">Previous</div>');
            $(this).append('<div id="next-slider-' + i + '" class="next-arrow arrow">Next</div>');
            $('#next-slider-' + i).click(function () {
                _slider.next();
            });
            $('#previous-slider-' + i).click(function () {
                _slider.previous();
            });
        },
        function () {
            //Remove buttons and 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);
    });