0

無限スライダーを書き込もうとしていますが、何らかの理由でスライダーはリストから最初の項目のみを取得し、次の「最初の」項目で firstli 変数を再設定することはありません。理由がわかりません。誰かが私が間違っていることを教えてもらえますか?

これが私のコードです:

var o = this;

o.brandSlider = function() {
    o.container = $('.brand-slider');
    o.containerW = null;
    o.ul = o.container.find('ul');
    o.li = o.ul.find('li').each(
        function() {
            var w = $(this).outerWidth(true);
            o.containerW = o.containerW + w;
        })

    o.ul.css({
        width : o.containerW+'px'
    })

    o.li.each(function(){
        o.currentPos = $(this).position();
        $(this).css('left', o.currentPos.left+'px');
    }).css('position', 'absolute');

    o.slideTimer = setInterval(function(){
        o.firstli = o.li.first().addClass('target');
        o.lastli = o.li.last();
        o.newPos = o.lastli.position().left - 80 + o.firstli.outerWidth(true);
        o.li.css('left', '-=1px')
        if (o.li.css('left') == '-250px') {
            o.firstli.appendTo(o.ul).css('left', o.newPos+'px').removeClass('target');
        }
    }, 1)
};

// This should always be the last method. Use this to control the object.
o.init = function() {
    o.brandSlider();
};

そしてここにマークアップがあります

<section>
            <h1>Brands I've worked with</h1>
            <div class="brand-slider">
                <ul>
                    <li class="logos-1">Item</li>
                    <li class="logos-2">Item</li>
                    <li class="logos-3">Item</li>
                    <li class="logos-4">Item</li>
                    <li class="logos-5">Item</li>
                    <li class="logos-6">Item</li>
                </ul>
            </div>
        </section>

前もって感謝します。

4

0 に答える 0