Search code examples
twitter-bootstrapcarouselblueimp

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?

Solution

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