Twitter Bootstrap 3 Carousel - remove circular effect

Question

I've implemented a Twitter Bootstrap carousel. It works fine with one exception.

After I slide all the pictures, when I reach at the end and press the right arrow, it turns me back to the first picture again, but I don't want this to happen.

I want to disable the right arrow when there is no others picture in right and if the user wants to see the first picture again he should press the left arrow and slide all the other pictures from right to left.

The same way should work for the left arrow, that means that the left arrow should be disabled from the start and enable just after clicking on the right arrow.

So it's something like a linear effect instead of circular.

Any solution for this problem?

Answer 1

Bootstrap carousel provides slid.bs.carousel event. This event is fired when the carousel has completed its slide transition.

In pseudocode the answer looks like:

----- on slide changed (slid.bs.carousel)
  > if active slide is the last one, hide the right control
    > if not, show it
  > if active slide is the first one, hide the left control
    > if not, show it

HTML

<div id="carousel-example-generic" class="carousel slide">
  <ol class="carousel-indicators">
    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
    <li data-target="#carousel-example-generic" data-slide-to="1" class=""></li>
    <li data-target="#carousel-example-generic" data-slide-to="2" class=""></li>
  </ol>
  <div class="carousel-inner">
    <div class="item active">
      <img data-src="holder.js/900x500/auto/#777:#555/text:First slide" alt="First slide" src="...">
    </div>
    <div class="item">
      <img data-src="holder.js/900x500/auto/#666:#444/text:Second slide" alt="Second slide" src="...">
    </div>
    <div class="item">
      <img data-src="holder.js/900x500/auto/#555:#333/text:Third slide" alt="Third slide" src="...">
    </div>
  </div>
  <a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left"></span>
  </a>
  <a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right"></span>
  </a>
</div>

jQuery

// get the carousel
var $carousel = $(".carousel");

// pause it
$carousel.carousel('pause');

// get right & left controls
var $rightControl = $carousel.find(".right.carousel-control");
var $leftControl = $carousel.find(".left.carousel-control");

// hide the left control (first slide)
$leftControl.hide();

// get 'slid' event (slide changed)
$carousel.on('slid.bs.carousel', function() {

    // get active slide
    var $active = $carousel.find(".item.active");

    // if the last slide,
    if (!$active.next().length) {
        // hide the right control
        $rightControl.fadeOut();
    // if not,
    } else {
        // show the right control
        $rightControl.fadeIn();
    }

    // if the first slide,
    if (!$active.prev().length) {
        // hide the left control
        $leftControl.fadeOut();
    // if not,
    } else {
        // show it
        $leftControl.fadeIn();
    }
});

JSFIDDLE

---

In the older versions of Bootstrap, the even was slid.