Question

我试图用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添加滚动条吗？

Answer 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; }

使用Tiny Carousel jQuery插件滑动div

1 个答案: