hide next button in bootstrap modal carousel

Question

I use this

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

for bootstrap carousel in bootstrap modal. This works perfectly. But I need to hide, the previous button, if I am on the first slide and hide the next button, if I am on the last slide Is there a way to handle this?

Answer 1

First, disable continuous

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

Second, add id's on next and previous buttons

<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>

Third, add CSS for id's

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

Answer 2

You can use the Events Callback function from the documentation. You can hide the previous and next button in base of a few functions (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.
        },

    }
);

Or try to set on the var options carousel: false