Javascript 引导转盘中的强制方向

我有以下幻灯片：

0 1 2 3 4

我希望旋转木马从3移动到0，同时看起来像是“向前”滑动到0，而不是“向后”滑动到0

这将从3“后退”到0：

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

我可以使用

next

强制方向，但它将显示从3到4，这是我不想要的：

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

是否可以通过强制滑动方向从3变为0？我要找的东西是：

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

---

实现反向的一种方法是操纵DOM中的项位置

在

slide.bs.carousel

事件中，您可以通过以下方式阻止其默认行为：

在当前活动项之前/之后移动所需项

调用

.carousel（'prev'）

或

.carousel（'next'）

方法

将项目移回其原始位置

以下代码能够防止默认行为并反转其方向（使用可选的方向参数）。在

slide.bs.carousel

事件中，它将从右向左滑动到第一项

可以在此处找到一个工作演示：

---

我知道这个问题已经好几年没提了。我亲自来这里寻找解决这个问题的办法。但看起来它从来没有完美解决过，不是在这里，也不是在其他任何地方

因此，我将我的解决方案发布给那些将来可能访问此页面的人

我很惊讶，这是可行的，只有css。如果这是他想要的，我希望OP能发表评论

.carousel.vertical{
位置：相对位置；
}
.传送带.垂直.传送带内部{
身高：100%；
宽度：自动；
}
.carousel.vertical.carousel-inner>.item{
过渡：0.6s缓进缓出；
转换：translate3d（100%，0，0）；
排名：0；
背景：#ccc；
宽度：100%；
高度：300px；
边框：1px实心#e6；
}
.carousel.vertical.carousel-inner>.item div{
文本对齐：居中；
身高：100%；
字号：80px；
线高：300px；
}
.carousel.vertical.carousel-inner>。下一步，
.carousel.vertical.carousel-inner>.prev，
.carousel.vertical.carousel-inner>。右{
转换：translate3d（100%，0，0）；
排名：0；
}
.carousel.vertical.carousel-inner>.left，
.carousel.vertical.carousel-inner>.prev.right，
.carousel.vertical.carousel-inner>.next.left，
.carousel.vertical.carousel-inner>.active{
变换：translate3d（0,0,0）；
排名：0；
}
.carousel.vertical.carousel-inner>.active.right，
.carousel.vertical.carousel-inner>.active.left{
转换：translate3d（-100%，0，0）；
排名：0；
}

1.
2.
3.
4.
5.
6.

Hmm。。。很接近，但不完全是我想要的，因为我只需要在某些情况下，而不是在所有的时间强制方向。我有以下幻灯片：

0 1 2 3 4

我希望旋转木马从3移动到0，同时看起来像是“向前”滑动到0，而不是“向后”滑动到0；我不确定我是否理解这个问题，为什么跳过幻灯片4？您可以捕获幻灯片事件并检查当前幻灯片是否为4，跳过它（将其环绕回0）。这就是你想要的吗？我想根据用户交互来显示幻灯片4，所以有时候它可用，有时候不可用。当我通过

.carousel（0）从3跳到0时动画看起来像是在“向后”滑动到0，但我希望它跳过“向前”到0。我不能使用
.carousel（'next'）因为虽然它给了我想要的“前进”动画，但它给了我幻灯片4
并捕获事件（）
slide.bs.carousel
，该事件在调用幻灯片时立即触发。制定逻辑，决定是显示幻灯片4，还是启动
.carousel（“下一步”）第二次移动到0并跳过它。整洁！这正是我四年前想要的。哈哈！
(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);
    }
  });

})();