1

TinyCarouseljQueryプラグインを使用していくつかのdivを水平方向にスライドさせようとしています。

これは私のhtmlです：

<div id="slider">

    <div class="viewport">
        <div class="overview">
            <div class="cols">
                <p>Whether you need to deliver product knowledge, promote a new service, or convey sales strategies, we make your message resonate, with materials that support your sales effort from the inside out.Whether you need to deliver product knowledge, promote a new service, or convey sales strategies, we make your message resonate, with materials that support your sales effort from the inside out.</p>
            </div>                
            <div class="cols">
                <p>ether you need to deliver product knowledge, promote a new service, or convey sales strategies, we make your message resonate, with materials that support your sales effort from the inside out.Whether you need to deliver product knowledge, promote a new service, or convey sales strategies, we make your message resonate, with materials that support your sales effort from the inside out.</p>
            </div>                
            <div class="cols">
                <p>r you need to deliver product knowledge, promote a new service, or convey sales strategies, we make your message resonate, with materials that support your sales effort from the inside out.Whether you need to deliver product knowledge, promote a new service, or convey sales strategies, we make your message resonate, with materials that support your sales effort from the inside out.</p>
            </div>                
            <div class="cols">
                <p>ct knowledge, promote a new service, or convey sales strategies, we make your message resonate, with materials that support your sales effort from the inside out.Whether you need to deliver product knowledge, promote a new service, or convey sales strategies, we make your message resonate, with materials that support your sales effort from the inside out.</p>
            </div>                
            <div class="cols">
                <p>knowledge, promote a new service, or convey sales strategies, we make your message resonate, with materials that support your sales effort from the inside out.Whether you need to deliver product knowledge, promote a new service, or convey sales strategies, we make your message resonate, with materials that support your sales effort from the inside out.</p>
            </div>                
            <div class="cols">
                <p>new service, or convey sales strategies, we make your message resonate, with materials that support your sales effort from the inside out.Whether you need to deliver product knowledge, promote a new service, or convey sales strategies, we make your message resonate, with materials that support your sales effort from the inside out.</p>
            </div>              
            <div class="cols">
                <p>promote a new service, or convey sales strategies, we make your message resonate, with materials that support your sales effort from the inside out.Whether you need to deliver product knowledge, promote a new service, or convey sales strategies, we make your message resonate, with materials that support your sales effort from the inside out.</p>
            </div>                
            <div class="cols">
                <p>strategies, we make your message resonate, with materials that support your sales effort from the inside out.Whether you need to deliver product knowledge, promote a new service, or convey sales strategies, we make your message resonate, with materials that support your sales effort from the inside out.</p>
            </div>                
            <div class="cols">
                <p>we make your message resonate, with materials that support your sales effort from the inside out.Whether you need to deliver product knowledge, promote a new service, or convey sales strategies, we make your message resonate, with materials that support your sales effort from the inside out.</p>
            </div>                
            <div class="cols">
                <p>with materials that support your sales effort from the inside out.Whether you need to deliver product knowledge, promote a new service, or convey sales strategies, we make your message resonate, with materials that support your sales effort from the inside out.</p>
            </div>

        </div>
    </div>

    <div style="clear:both;"></div>

    <div class="nav-btn">    
        <a class="buttons prev" href="#">left</a>   
        <a class="buttons next" href="#">right</a>
    </div>
</div>

これは私のjQueryです

<script type="text/javascript">
//Initialize
$(document).ready(function(){   

    $('#slider').tinycarousel({ 
        display: 3, 
        pager: true, 
        interval: true,
        intervaltime: 10000,            
        //axis: 'y'
        controls: true 
        //animation: false
    });
});

このスクリプトは機能していますが、6列を挿入するとdivスライディングが機能しません。何故ですか？colsdivに固定の幅と高さを指定しました。colsdivの内容がオーバーフローすることがあります。その場合、cols divにスクロールバーを追加できますか？

4

1 に答える 1

1

jquery プラグインのコーディングでは、次の関数は次と前のボタンを非表示にします。無効化クラスを表示したい他のクラスに置き換えます

function setButtons()
        {
            if(options.controls)
            {
                oBtnPrev.toggleClass('disable', iCurrent <= 0 );
                oBtnNext.toggleClass('disable', !(iCurrent +1 < iSteps));
            }

            if(options.pager)
            {
                var oNumbers = $('.pagenum', oPager);
                oNumbers.removeClass('active');
                $(oNumbers[iCurrent]).addClass('active');
            }           
        }

以下のコーディングを CSS スタイルに変更します。

#slider-code .disable { visibility: hidden; } to


#slider-code .disable { visibility: display; }
于 2012-12-22T08:08:45.340 に答える