Question

我有以下幻灯片：0 1 2 3 4我希望旋转木马从3变为0，同时看起来像是向前滑动＆＃39;到0，而不是＆＃39;回到＆＃39;到0;

这将滑动＆＃34;返回＆＃34;从3到0：

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

我可以使用next来强制指示，但它会显示3到4，我不想要：

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

是否可以通过强制将其滑动到的方向从3变为0？我正在寻找类似的东西：

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

Answer 1

我知道这个问题提出以来已经有好几年了。 TBH我本人是来这里寻求解决方案的。但看起来它从未得到完美解决，不在这里，在其他任何地方也没有。

因此，我将我的解决方案发布给将来可能会访问此页面的用户。

令我惊讶的是，这仅适用于CSS。如果这是他想要的，我希望OP能够发表评论。

.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

实现反向的一种方法是操纵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);
    }
  });

})();

在Bootstrap轮播中强制指示方向

2 个答案: