Javascript BXslider从循环上的旋转木马中删除一项

我有一个显示5个元素的垂直滑块。如果旋转木马中只有5个或更少的项目，我将隐藏下一个和上一个箭头。如果有6个以上的元素，一切正常，但是如果我正好有6个元素，因此比我显示的多了一个元素，那么BXslider会在我单击next时隐藏一个元素，当它应该只循环元素时，我会进入最新的项

我尝试了所有可能的设置，但它总是在最后一个项目上隐藏一个元素，然后在再次单击“下一步”时再次添加一个元素。在我看来，这似乎是BXslider中的一个bug

这是我的密码

<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();
            }
        }
    });

var verticalSlider=$（“#引导视觉垂直旋转木马”）；
verticalSlider.bxSlider({
模式：“垂直”，
米斯利德斯：5，
最大幻灯片数：5，
幻灯片摘要：0，
速度：250，
无穷远：没错，
第一,，
下一个文本：“”，
上一个文本：“”，
传呼机：错，
控制：对，
自适应高度：false，
回答：错，
onSliderLoad:函数（）{
addClass（'slider-loaded'）；
$（'.bx控制方向a'）.attr（'href'，'#'）；
var total_slide=verticalSlider.getSlideCount（）；
如果（总滑动次数<6）{
$（“.bx wrapper.bx控件”）.hide（）；
}
}
});

我还在这里添加了JSfiddle。我没有添加所有样式，所以看起来很有趣，但如果单击“下一步”或“上一步”箭头，您可以看到容器如何更改高度