试图添加幻灯片

Question

我要做的是添加一些幻灯片到我目前的幻灯片。最初只有9张幻灯片，但我不得不添加一些幻灯片。一开始我觉得就像改变一样简单

slider.slides = 9; 

至

slider.slides = 11;

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

我将添加我正在使用的jQuery，希望这与此有关。如果没有，我将继续进行，并获得一个JSFiddle。

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

这是导航

    <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>

如果不让我知道的话，我希望这已经足够了。

[不管怎么说，这是小提琴手，http://jsfiddle.net/cry4gLn6/1/ ]

Answer 1

您应该在您的javascript中添加以下内容：

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

这将动态计算滑块使用任意数量的幻灯片所需的总宽度。我已经更新了你的小提琴在这里。

Answer 2

您只需更新#slides div的宽度即可。

目前它的900%

如果这个宽度是根据no使用jquery动态计算的。幻灯片，你的滑块将适用于任何不。幻灯片。