BXslider在循环中从轮播中删除一个项目

Question

我有一个垂直滑块，显示5个元素。如果旋转木马中只有5个或更少的物品，我会隐藏下一个和前一个箭头。如果有超过6个元素一切正常，但如果我有6个元素，那么比我显示的要多一个，当我点击下一个时，BXslider会隐藏一个元素，当它应该只循环元素时，我会找到最新的元素。

我已经尝试了所有可能的设置，但它总是在最后一项上隐藏一个元素，而不是再次添加一个元素，如果我再次单击下一步。这对我来说似乎是BXslider中的一个错误。

这是我的代码

<div id="lead-visual-vertical-carousel">
    <div class="vertical-item">
        <a href="/latest-news">
            <h5>Explore our bakery centre of excellence</h5>
            <p>Rapid product development, test-driving and limited time offers - we can do it all.</p>
        </a>
    </div>
    <div class="vertical-item">
        <a href="/latest-news">
            <h5>Explore our bakery centre of excellence</h5>
            <p>Rapid product development, test-driving and limited time offers - we can do it all.</p>
        </a>
    </div>    
    <div class="vertical-item">
        <a href="/latest-news">
            <h5>Explore our bakery centre of excellence</h5>
            <p>Rapid product development, test-driving and limited time offers - we can do it all.</p>
        </a>
    </div>    
    <div class="vertical-item">
        <a href="/latest-news">
            <h5>Explore our bakery centre of excellence</h5>
            <p>Rapid product development, test-driving and limited time offers - we can do it all.</p>
        </a>
    </div>   
    <div class="vertical-item">
        <a href="/latest-news">
            <h5>Explore our bakery centre of excellence</h5>
            <p>Rapid product development, test-driving and limited time offers - we can do it all.</p>
        </a>
    </div>    
    <div class="vertical-item">
        <a href="/latest-news">
            <h5>Explore our bakery centre of excellence</h5>
            <p>Rapid product development, test-driving and limited time offers - we can do it all.</p>
        </a>
    </div>
</div>

和JS代码

var verticalSlider = $('#lead-visual-vertical-carousel');

verticalSlider.bxSlider({
        mode: 'vertical',
        minSlides: 5,
        maxSlides: 5,
        slideMargin: 0,
        speed: 250,
        infiniteLoop:true,
        moveSlides: 1,
        nextText: '<i class="fa fa-long-arrow-down"></i>',
        prevText: '<i class="fa fa-long-arrow-up"></i>',
        pager: false,
        controls: true,
        adaptiveHeight: false,
        responsive:false,
        onSliderLoad: function () {
            verticalSlider.addClass('slider-loaded');
            $('.bx-controls-direction a').attr('href', '#');
            var total_slide = verticalSlider.getSlideCount();
            if (total_slide < 6) {
                $(".bx-wrapper .bx-controls").hide();
            }
        }
    });

我还在这里添加了JSfiddle https://jsfiddle.net/om0cn2ew/。我没有添加所有样式，所以它看起来很有趣，但如果你点击下一个或上一个箭头，你可以看到容器如何改变高度。