Javascript 正在尝试添加幻灯片

我想做的是在我当前的幻灯片中添加一些幻灯片。最初只有9张幻灯片，但我不得不添加一些幻灯片。起初我觉得这就像改变一样简单

slider.slides = 9; 

到

但事实证明，这很困难，因为额外的幻灯片没有显示，而原来的9张幻灯片显示了

我将添加我正在使用的jQuery，希望它与此相关。如果没有的话，我就一起去找一个JSFIDLE

var slider = {};
        slider.current = 1;
        slider.slides = 11;
        slider.goto = function (slideNumber, callback) {
            var difference = Math.abs(this.current - slideNumber);
            this.current = slideNumber;

            $('#slides').stop().animate({
                left: (-(slideNumber-1)*100) + '%'
            }, 400*difference, callback);

            $('a[href^="#slide-"]').parent().removeClass('active');
            $('a[href="#slide-' + slideNumber + '"]').parent().addClass('active');
        }

        slider.prev = function(){
            if(this.current > 1) {
                var slideNumber = Number(this.current)-1;
                this.goto(slideNumber);
            }
        }

        slider.next = function(){
            if(this.current < this.slides) {
                var slideNumber = Number(this.current)+1;
                this.goto(slideNumber);
            }
        }

        $('a').bind('click', function(event){
            var link = $(this).attr('href');
            if (link.indexOf('#slide-') != -1) {
                event.preventDefault();

                var slideNumber = link.replace('#slide-','');
                if (slideNumber == 'next') {
                    slider.next();
                } else if (slideNumber == 'prev') {
                    slider.prev();
                } else {
                    slider.goto(slideNumber);
                }
            }
        });

        $(window).keydown(function(event){
            if(event.keyCode == 39) {
                slider.next();
            } else if (event.keyCode == 37) {
                slider.prev();
            }
        });

var slider={}；
slider.current=1；
slider.slides=11；
slider.goto=函数（slideNumber，回调）{
var差=Math.abs（this.current-slideNumber）；
this.current=slideNumber；
$（“#幻灯片”）.stop（）.animate({
左：（（slideNumber-1）*100）+'%
}，400*差额，回拨）；
$（'a[href^=“#幻灯片-”）.parent（）.removeClass（'active'）；
$（'a[href=“#slide-'+slideNumber+'”）.parent（）.addClass（'active'）；
}
slider.prev=函数（）{
如果（当前值>1）{
var slideNumber=Number（this.current）-1；
this.goto（slideNumber）；
}
}
slider.next=函数（）{
if（this.current

这是导航

    <ul>
        <li class="active"><a href="#slide-1">1</a></li>
        <li><a href="#slide-2">2</a></li>
        <li><a href="#slide-3">3</a></li>
        <li><a href="#slide-4">4</a></li>
        <li><a href="#slide-5">5</a></li>
        <li><a href="#slide-6">6</a></li>
        <li><a href="#slide-7">7</a></li>
        <li><a href="#slide-8">8</a></li>
        <li><a href="#slide-9">9</a></li>
        <li><a href="#slide-10">10</a></li>
        <li><a href="#slide-11">11</a></li>
        <li><a href="/resources/">Back</a></li>
    </ul>

如果不让我知道，我希望这就足够了

---

[这里是Jsfiddle]

您只需要更新

#幻灯片的宽度

目前其
900%

如果使用jquery根据幻灯片数量动态计算此宽度，则滑块将适用于任何数量的幻灯片。
您应该在javascript中添加以下内容：

$('#slides').css('width', (slider.slides * 100) + '%');
$('.slide').css('width', (100 / slider.slides) + '%');

这将动态计算滑块处理任意数量幻灯片所需的总宽度。我已经更新了。
啊，我现在明白了！不管怎样，你能给我指引正确的方向吗？太好了。谢谢你，杰米。
$('#slides').css('width', (slider.slides * 100) + '%');
$('.slide').css('width', (100 / slider.slides) + '%');