j如果左侧或右侧没有更多图像，则禁用旋转木马箭头

Question

我使用 Sorgalla jcarousel。假设我有九张图片，脚本设置为 scroll: 3，我正在观看图片 1-3，那么箭头应该只在右侧，这意味着我可以在右侧浏览更多图片。然后，当我浏览右侧时，我正在观看 f.e。图 4、5、6，在这种情况下，箭头应该在两侧，因为左侧和右侧都有图片。但是，如果我再次向右浏览并到达图像 7、8、9，右侧的箭头应该消失，因为没有更多内容可以向右浏览。在这种情况下应该只显示左箭头。

我的脚本：

jQuery(文档).ready(函数($) {

    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。

j如果左侧或右侧没有更多图像，则禁用旋转木马箭头

jCarousel arrow disable if there are no more image in the left or right

jquery

magento

jcarousel