1

我正在尝试使用 Tiny Carousel jQuery 插件水平滑动一些 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 cols div 时，滑动不起作用。这是为什么？我已经给 cols div 提供了固定宽度和高度。有时 cols div 中的内容会溢出。在这种情况下，我可以在 cols div 中添加滚动条吗？

4

1 回答 1

1

在 jquery 插件编码中，下面的函数隐藏了 next 和 prev 的按钮。将禁用类替换为您要显示的其他类

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