Warning: file_get_contents(/data/phpspider/zhask/data//catemap/2/jquery/68.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Jquery Jcarousel带控件的多滑块选项问题_Jquery_Jcarousel - Fatal编程技术网

Jquery Jcarousel带控件的多滑块选项问题

Jquery Jcarousel带控件的多滑块选项问题,jquery,jcarousel,Jquery,Jcarousel,我正在使用jcarousel插件在同一页面中播放多个滑块,每个滑块都有外部控件,但按一个控件可以为所有滑块设置动画,而不是为所属控件设置动画! 代码如下: <div id="mycarousel"> <ul> <li>item</li> <li>item</li> </ul> <div class="control">

我正在使用jcarousel插件在同一页面中播放多个滑块,每个滑块都有外部控件,但按一个控件可以为所有滑块设置动画,而不是为所属控件设置动画! 代码如下:

<div id="mycarousel">
        <ul>
        <li>item</li>
        <li>item</li>
        </ul>
    <div class="control">
      <a href="#" class="nav_active">1</a>
      <a href="#">2</a>
    </div>  
</div>          

<div id="mycarousel_2">
        <ul>
        <li>item</li>
        <li>item</li>
        </ul>
    <div class="control">
      <a href="#" class="nav_active">1</a>
      <a href="#">2</a>
    </div>  
</div>
如何使用自己的控件使每个滑块分别运行?
谢谢

我也有同样的问题,对于第一个转盘,我使用了类控制,但是对于第二个转盘,我使用了类控制2。这对我很有帮助

你可以用这个,它对我很有用:

HTML

<div class="carousel_content">
    <ul class="mycarousel">
        <li>item1</li>
        <li>item2</li>
        <li>item3</li>
        <li>item4</li>
    </ul>
    <div class="controls">
        <a href="#" class="prev">Previous</a>
        <a href="#" class="next">Next</a>
    </div>  
</div>          

<div class="carousel_content">
    <ul class="mycarousel">
        <li>item1</li>
        <li>item2</li>
        <li>item3</li>
        <li>item4</li>
    </ul>
    <div class="controls">
        <a href="#" class="prev">Previous</a>
        <a href="#" class="next">Next</a>
    </div>  
</div>  
<div class="carousel_content">
    <ul class="mycarousel">
        <li>item1</li>
        <li>item2</li>
        <li>item3</li>
        <li>item4</li>
    </ul>
    <div class="controls">
        <a href="#" class="prev">Previous</a>
        <a href="#" class="next">Next</a>
    </div>  
</div>          

<div class="carousel_content">
    <ul class="mycarousel">
        <li>item1</li>
        <li>item2</li>
        <li>item3</li>
        <li>item4</li>
    </ul>
    <div class="controls">
        <a href="#" class="prev">Previous</a>
        <a href="#" class="next">Next</a>
    </div>  
</div>  
(function($){
    $('.mycarousel').jcarousel({
        scroll: 1,
        animation: 1000,
        easing: 'easeOutQuart',
        vertical: false,
        initCallback: mycarousel_initCallback,
        buttonNextHTML: null,
        buttonPrevHTML: null,
        itemLastOutCallback: {
            onAfterAnimation: disableCustomButtons
        },
        itemLastInCallback: {
            onAfterAnimation: disableCustomButtons
        }
    });

    function mycarousel_initCallback(carousel) {

        var elementPrev = carousel.container.next('.controls').children('.prev');
        var elementNext = carousel.container.next('.controls').children('.next');

        elementPrev.bind('click', function() {
            carousel.prev();
            return false;
        });

        elementNext.bind('click', function() {
            carousel.next();
            return false;
        });
    };

    function disableCustomButtons(carousel){

        var elementPrev = carousel.container.next('.controls').children('.prev');
        var elementNext = carousel.container.next('.controls').children('.next');

        if (carousel.first == 1) {
            elementPrev.addClass('inactive');
        } else {
            elementPrev.removeClass('inactive');
        }

        if (carousel.last == carousel.size()) {
            elementNext.addClass('inactive');
        } else {
            elementNext.removeClass('inactive');
        }

    };

})(jQuery);