Question

使用下面的代码，当我点击 MY BUTTON 时，会显示第3项。

$('#myButton').click(function () {
    $('#myCarousel').carousel(3);
});

-

<div id="myCarousel" class="carousel slide">
    <div class="carousel-inner">
        <div class="active item">0</div>
        <div class="item">1</div>
        <div class="item">2</div>
        <div id="myItem3" class="item">3</div>
    </div>
    <!-- Carousel nav -->
    <a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a>
    <a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a>

    <a id="myButton">MY BUTTON</a>
</div>

有没有办法通过他的身份证明来展示项目，而不是他的索引？

有点像这样：

$('#myButton').click(function () {
    $('#myCarousel').carousel($('#myItem3'));
});

Answer 1

您可以执行$("#myItem4").prevAll("div").length + 1

之类的操作

这将获得所有以前的兄弟姐妹，计算他们，并添加1 ...在其兄弟姐妹中获取自己的索引

编辑：我刚刚找到一些文档，轮播中有一个基于0的索引。我原以为它是1-based因为你说.carousel（4）带你到第4项。由于它是从0开始的，因此请删除+ 1 ...

$('#myButton').click(function () {
    $('#myCarousel').carousel($("#myItem4").prevAll("div").length);
});

通过其ID而不是索引滑动到项目 - .carousel（索引）

1 个答案: