用Tiny Carousel jQuery插件滑动div [英] sliding div with Tiny Carousel jQuery plugin

问题描述

这是我的HTML：

 < div id =slider> 
 
< div class =viewport> 
< div class =overview> 
< div class =cols> 
无论您需要提供产品知识，推广新服务还是传达销售策略，我们都会让您的信息产生共鸣，并且从内到外支持您的销售工作的材料。您是否需要交付产品知识，推广新服务或传达销售策略，我们会使您的信息产生共鸣，其中的材料可以从内到外支持您的销售工作。< / p> 
< / div> 
< div class =cols>您需要提供产品知识，推广新服务或传达销售策略所需的
< p> ether，我们会让您的信息产生共鸣，从内到外支持您的销售努力的材料。您是否需要交付产品知识，推广新服务或传达销售策略，我们会使您的信息产生共鸣，其中的材料可以从内到外支持您的销售工作。< / p> 
< / div> 
< div class =cols> 
< p>您需要提供产品知识，推广新服务，或传达销售策略，我们才能使您的信息产生共鸣，并从内到外支持您的销售工作。知识，推广新服务或传达销售策略，我们会使您的信息产生共鸣，其中的材料可以从内到外支持您的销售工作。< / p> 
< / div> 
< div class =cols> b $ b b p知识，推广新服务，或传达销售策略，我们会使您的信息产生共鸣，并从内到外支持您的销售工作。您是否需要提供产品知识，推广新的服务或传达销售策略，我们可以让您的信息产生共鸣，并从内部支持您的销售工作。< / p> 
< / div> 
< div class =cols> 
< p>知识，推广新服务或者传达销售策略，我们会让您的信息产生共鸣，并且从内到外都可以支持您的销售工作。无论您需要提供产品知识还是推广新服务，或者传达销售策略，我们会使您的信息产生共鸣，从内到外支持您的销售工作的材料。< / p> 
< / div> 
< div class =cols> 
< p>新服务，或者传达销售策略，我们会让您的信息产生共鸣，从内到外支持您的销售工作的材料。无论您需要提供产品知识，推广新服务还是传达销售策略，我们会让您的信息产生共鸣，并从内到外支持您的销售工作。< / p> 
< / div> 
< div class =cols> 
< p>宣传新服务，或传达销售策略，我们会让您的信息产生共鸣，并从内到外支持您的销售工作。无论您需要提供产品知识，推广新服务还是传达销售策略，我们会让您的信息产生共鸣，并从内到外支持您的销售努力。< / p> 
< / div> 
< div class =cols> 
< p>策略，我们会使您的信息产生共鸣，从内到外支持您的销售工作的材料。无论您需要提供产品知识，推广新服务还是传达销售策略，我们都会让您的信息共鸣，从内到外支持您的销售努力的材料。< / p> 
< / div> 
< div class =cols> 
< p>我们使您的信息产生共鸣，并且从内到外支持您的销售努力。无论您需要提供产品知识，推广新服务还是传达销售策略，我们都会让您的信息产生共鸣，其材料可以从内到外支持您的销售工作。< / p> 
< / div> 
< div class =cols> 
< p>包含从内到外支持您的销售工作的材料。无论您需要提供产品知识，推广新服务还是传达销售策略，我们都会让您的信息产生共鸣，其中包含支持您销售的材料努力从内而外。< / p> 
< / div> 
 
< / div> 
< / div> 
 
< div style =clear：both;>< / div> 
 
< div class =nav-btn> 
< a class =buttons prevhref =＃> left< / a> 
< a class =buttons nexthref =＃>右< / a> 
< / div> 
< / div> 
  

这是我的jQuery

 < script type =text / javascript> 
 //初始化
 $（document）.ready（function（）{
 
 $（'＃slider'）。tinycarousel（{
 display：3，
 pager：true，
 interval：true，
 intervaltime：10000，
 // axis：'y'
控件：true 
 //动画：false 
}）; 
}）; 
  

此脚本正在运行，但当我插入6 cols div滑动不起作用。这是为什么？我已经给cols divs设定了宽度和高度。有时cols div中的内容溢出。在这种情况下，我可以添加一个滚动条到cols div？

解决方案

在jquery插件编码中，下面的函数隐藏按钮下一个和上一个。将disable类替换成你想显示的其他类。
$ b $ pre $函数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'）;


$ / code>

更改CSS样式中的以下编码

 ＃slider-code .disable {visibility：hidden; }到
 
 
＃slider-code .disable {visibility：display; } 
  

I am trying to slide some divs horizontally with the Tiny Carousel jQuery plugin.

this is my 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> 

this is my 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
    });
});

This script is working, but when I insert 6 cols div sliding is not working. Why is that? I have given fix width and height to cols divs. Sometimes the contents in cols div are overflowing. In that case can I add a scroll bar to cols div?

解决方案

In jquery plugin coding, the below function hides the button of next and prev. Replace the disable class into some other you want to display

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

Change the below coding in CSS style

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


#slider-code .disable { visibility: display; } 

这篇关于用Tiny Carousel jQuery插件滑动div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！