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

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

• javascript
• jquery
• twitter-bootstrap

• 2 stackoverflow./questions/16877562/… – Jordan.J.D Commented Aug 5, 2014 at 19:01
• Hmm... close, but not quite what I'm looking for, since I need to force direction only on certain occasions, not all the time. 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; – M - Commented Aug 5, 2014 at 19:16
• i am not sure if i understand the issue, why are you skipping slide 4? you can catch the slide event and check if the current slide is 4, skip it (which wraps around back to 0). Is that what you want? – Jordan.J.D Commented Aug 5, 2014 at 19:19
• I want to show slide 4 depending on user interaction, so sometimes it will be available, and sometimes it won't. When I skip from 3 to 0 via .carousel(0); the animation looks like it's sliding 'back' to 0, but I want it to skip 'forward' to 0. I can't use .carousel('next'); because although it gives me the 'forward' animation I want, it gives me slide 4. – M - Commented Aug 5, 2014 at 19:56
• use .carousel('next'); and catch the event (getbootstrap./javascript/#carousel-usage) slide.bs.carousel which fires right when the slide is called. make logic that decides whether to show slide 4, or launch .carousel('next'); a second time to move to 0 and skip it. – Jordan.J.D Commented Aug 5, 2014 at 20:01

2 Answers 2

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 ment 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./ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn./bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn./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>

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

})();