在Bootstrap轮播中强制指示方向

Question

我有以下幻灯片: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);

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>