1

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>

JS

/**
 * We use the initCallback callback
* to assign functionality to the controls
*/
function mycarousel_initCallback(carousel) {
jQuery('.control a').bind('click', function() {
    carousel.scroll(jQuery.jcarousel.intval(jQuery(this).text()));
    $('.control a').removeClass('nav_active');
    $(this).addClass('nav_active');
    return false;
}); 
jQuery('.jcarousel-scroll select').bind('change', function() {
    carousel.options.scroll = jQuery.jcarousel.intval(this.options[this.selectedIndex].value);
    return false;
});
 };

  // Ride the carousel...
 jQuery(document).ready(function() {
jQuery("#mycarousel, #mycarousel_2").jcarousel({
    scroll: 1,
    animation: 1000,
    easing: 'easeOutQuart',
    vertical: true,
    initCallback: mycarousel_initCallback,
    // This tells jCarousel NOT to autobuild prev/next buttons
    buttonNextHTML: null,
    buttonPrevHTML: null
});
});

助けてください、すべてのスライダーを独自のコントロールで個別に実行する必要があります! ありがとう

4

1 に答える 1

0

あなたはこれを使うことができます、それは私のために働きます：

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>

脚本

(function($){
    $('.mycarousel').jcarousel({
        scroll: 1,
        animation: 1000,
        easing: 'easeOutQuart',
        vertical: true,
        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);
于 2013-02-13T22:27:07.323 に答える