Question

我使用Sorgalla jcarousel。让我们说我有九个图像，脚本设置滚动：3，我正在看图像1-3，然后箭头应该只在右侧，这意味着我可以浏览更多的图片在右边。然后，当我浏览右边，我正在看f.e.图像4,5,6，在这种情况下，箭头应该在两侧，因为左侧和右侧都有图片。但是，如果我再次向右浏览直到图像7,8,9，则右侧的箭头应该消失，因为没有其他内容可以向右浏览。在这种情况下，只应显示左箭头。

我的剧本：

jQuery（document）.ready（function（$）{

    myCarousel = null; // This will be the carousel object

    function mycarousel_initCallback(carousel, state) {
        if (state == 'init') {
            myCarousel = carousel;
        }
        $('#arrows_gallery_next').bind('click', function() {
            carousel.next();
            return false;
        });
        $('#arrows_gallery_prev').bind('click', function() {
            carousel.prev();
            return false;
        });


        $('.product-view .product-img-box .more-views .jcarousel-skin-tango .jcarousel-item').width(<?php echo $thumbX;?>);

    };

    jQuery('#arrows_gallery_carousel').jcarousel({
        scroll: 1,
        visible:3,
        initCallback: mycarousel_initCallback,
        buttonNextHTML: null,
        buttonPrevHTML: null,
            setupCallback:function(){
               jQuery('#arrows_gallery_carousel.jcarousel-list li').each(function(){
                    jQuery(this).width(103)
               })
            },
    });
});

Answer 1

更改您的分页处理程序以跟踪页码，并在它们到达开头或结尾时启用/禁用分页按钮。

function mycarousel_initCallback(carousel, state) {
    var page = 1;
    $('#arrows_gallery_prev').css('visibility', 'hidden');

    if (state == 'init') {
        myCarousel = carousel;
    }
    $('#arrows_gallery_next').bind('click', function() {
        carousel.next();
        page++;
        $('#arrows_gallery_prev').css('visibility', 'visible');
        $('#arrows_gallery_next').css('visibility', (page == 3) ? 'hidden' : 'visible');
        return false;
    });
    $('#arrows_gallery_prev').bind('click', function() {
        carousel.prev();
        page--;
        $('#arrows_gallery_next').css('visibility', 'visible');
        $('#arrows_gallery_prev').css('visibility', (page == 1) ? 'hidden' : 'visible');
        return false;
    });


    $('.product-view .product-img-box .more-views .jcarousel-skin-tango .jcarousel-item').width(<?php echo $thumbX;?>);

};

顺便提一下，你提到滚动设置为3，但你的配置滚动为1。

如果左侧或右侧没有更多图像，则jCarousel箭头禁用

1 个答案: