CODEWITHSUNDEEP
twitter-bootstrapcarouselblueimp
Shumaise Mohammed
Shumaise Mohammed

Reputation: 417

hide next button in bootstrap modal carousel

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?

Upvotes: 2

Views: 1902

Answers (2)

shaharan
shaharan

Reputation: 106

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

Upvotes: 3

Tasos
Tasos

Reputation: 7587

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

Upvotes: 0

Related Questions