Boosting directions in the Bootstrap carousel

Question

I have the following slides: 0 1 2 3 4and I want the carousel to move from 3 to 0, looking like it is moving “forward” by 0, instead of “back” by 0;

This will shift back from 3 to 0:

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

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

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

Is it possible to go from 3 to 0, forcing the direction in which you want to slide it? I am looking for something like:

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

Answer 1

One way to achieve the opposite direction is to control the position of elements in the DOM.

slide.bs.carousel , :

• /
• .carousel('prev') .carousel('next')

( ). slide.bs.carousel .

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

})();