Forcing direction in Bootstrap carousel

Question

I have the following slides: 0 1 2 3 4 and I want the carousel to go from 3 to 0 while looking like it's sliding 'forward' to 0, instead of 'back' to 0;

This will slide "back" from 3 to 0:

$("#my-carousel").carousel(slideNum);

I can force direction by using next, but it will show from 3 to 4, which I don't want:

$("#my-carousel").carousel('next');

Is it possible to go from 3 to 0, by forcing the direction you want it to slide to? I'm looking for something like:

$("#my-carousel").carousel(slideNum, direction);

Answer 1

I know it's been years since this question first raised. TBH I myself came here looking for the solution to this one. but looks like it was never resolved perfectly, not here, not anywhere else too.

So I am posting my solution for those who would possibly be visiting this page in future.

I was surprised that this is doable with only css. I would hope a comment from the OP if this was the thing he wanted.

.carousel.vertical {
    position: relative;
}

.carousel.vertical .carousel-inner {
    height: 100%;
    width: auto;
}

.carousel.vertical .carousel-inner > .item {
    transition: 0.6s ease-in-out;
    transform: translate3d(100%, 0, 0);
    top: 0;
    background: #ccc;
    width: 100%;
    height: 300px;
    border: 1px solid #e6e6e6;
}

.carousel.vertical .carousel-inner > .item div {
    text-align: center;
    height: 100%;
    font-size: 80px;
    line-height: 300px;
}

.carousel.vertical .carousel-inner > .next,
.carousel.vertical .carousel-inner > .prev,
.carousel.vertical .carousel-inner > .right {
    transform: translate3d(100%, 0, 0);
    top: 0;
}

.carousel.vertical .carousel-inner > .left,
.carousel.vertical .carousel-inner > .prev.right,
.carousel.vertical .carousel-inner > .next.left,
.carousel.vertical .carousel-inner > .active {
    transform: translate3d(0, 0, 0);
    top: 0;
}

.carousel.vertical .carousel-inner > .active.right,
.carousel.vertical .carousel-inner > .active.left {
    transform: translate3d(-100%, 0, 0);
    top: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">


<div class="container">
    <div id="myCarousel" class="carousel vertical slide" data-ride="carousel" data-interval="9000">
        <!-- Wrapper for slides -->
        <div class="carousel-inner">
            <div class="item active">
                <div>1</div>
            </div>

            <div class="item">
                <div>2</div>
            </div>

            <div class="item">
                <div>3</div>
            </div>
            <div class="item">
                <div>4</div>
            </div>

            <div class="item">
                <div>5</div>
            </div>

            <div class="item">
                <div>6</div>
            </div>
        </div>

        <!-- Indicators -->
        <ol class="carousel-indicators">
            <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
            <li data-target="#myCarousel" data-slide-to="1"></li>
            <li data-target="#myCarousel" data-slide-to="2"></li>
            <li data-target="#myCarousel" data-slide-to="3"></li>
            <li data-target="#myCarousel" data-slide-to="4"></li>
            <li data-target="#myCarousel" data-slide-to="5"></li>
        </ol>
    </div>
</div>

Answer 2

One way to achieve the reversed direction is to manipulate the items position in the DOM.

On the slide.bs.carousel event you can prevent its default behavior, reverse the direction by:

1. Move the desired item before/after the current active item
2. Call the .carousel('prev') or .carousel('next') method
3. Move item back to its original position

The following code is able to prevent default behavior and reverse its direction (with optional direction parameter). On the slide.bs.carousel event, it will slide to the first item from right-to-left.

A working demo can be found here: http://codepen.io/dimbslmh/pen/JEaGJK

(function() {
  'use strict';

  /**
   * Slide to item.
   * @param {object} event - Carousel slide event.
   * @param {string} [direction=left] - Cycle direction.
   */
  function slideTo(event, direction) {
    var $element = $(event.currentTarget);
    var $indicators = $element.find('.carousel-indicators');
    var $items = $element.find('.item');
    var $active = $element.find('.item.active');
    var $item = $(event.relatedTarget);
    var itemIndex = $item.index();

    if (typeof direction === 'undefined') direction = 'left';

    if (event.direction !== direction) {
      event.preventDefault();

      if (direction === 'right') {
        $item.insertBefore($active);
        $element.carousel('prev');

        setTimeout(function() {
          if (itemIndex === $items.length - 1) {
            $item.insertAfter($items.eq(itemIndex - 1));
          } else {
            $item.insertBefore($items.eq(itemIndex + 1));
          }
        }, 600);
      } else {
        $item.insertAfter($active);
        $element.carousel('next');

        setTimeout(function() {
          if (itemIndex === 0) {
            $item.insertBefore($items.eq(1));
          } else {
            $item.insertAfter($items.eq(itemIndex - 1));
          }
        }, 600);
      }

      $indicators.find('.active').removeClass('active');
      $indicators.children().eq(itemIndex).addClass('active');
    }
  }

  $('#myCarousel').on('slide.bs.carousel', function(event) {
    if ($(event.relatedTarget).index() === 0) {
      slideTo(event);
    }
  });

})();