Question

我用这个

https://github.com/blueimp/Bootstrap-Image-Gallery

用于bootstrap模式中的bootstrap轮播。这非常有效。但我需要隐藏，前一个按钮，如果我在第一张幻灯片上并隐藏下一个按钮，如果我在最后一张幻灯片上有没有办法处理这个？

Answer 1

首先，禁用连续

var options = {
//Allow continuous navigation, moving from last to first
// and from first to last slide:

continuous: false,
};

or make

continuous: !1  // In jquery.blueimp-gallery.min.js

其次，在下一个和上一个按钮上添加id

<button id="prv" type="button" class="btn btn-default pull-left prev">
     Previous
</button>
<button id="nxt" type="button" class="btn btn-primary next">
     Next
</button>

第三，为id的

添加CSS

.blueimp-gallery-left #prv, .blueimp-gallery-right #nxt{
display: none; }

Answer 2

您可以使用文档中的Events Callback功能。您可以在几个函数（documentation）

的基础上隐藏上一个和下一个按钮

var gallery = blueimp.Gallery(
    linkList,
    {
        onopened: function () {
            // Callback function executed when the Gallery has been initialized
            // and the initialization transition has been completed.
        },
        onslidecomplete: function (index, slide) {
            // Callback function executed on slide content load.
        },

    }
);

或尝试设置var选项carousel: false

在bootstrap模态轮播中隐藏下一个按钮

2 个答案: