Bootstrap 4个轮播外部控件

Question

我在轮播中看到了指示器，我可以在其中单击一个元素转到下一个滑块或上一个滑块。轮播外部控件是否可以直接滑动到指定的轮播项？

我试图添加一个外部面板（到轮播组件），其中包含指向特定幻灯片的链接。我正在尝试做一些类似于 easy-quiz.net 中使用的 jquery 新闻滑块的操作。这是一个 jquery 扩展，回调可以更改突出显示的项目，但希望能够单击其中一项并让轮播聚焦于相应的项目。

Answer 1

是的，这是可能的，我个人使用 Revolution 滑块来实现这一点。查看我使用轮播的网站：http://4kaststrategies.com/

在旋转木马的底部，您会看到一个小圆形按钮，您可以在其中导航到您想要的任何项目图像。

查找文档：https://www.themepunch.com/revsliderjquery-doc/slider-revolution-jquery-5-x-documentation/

Answer 2

您是否跳过了文档中的 Carousel With indicators？该示例向您展示了如何直接滑动到特定项目。

以下代码用于实现此目的：

<ol class="carousel-indicators">
    <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
    <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
    <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
</ol>

注意属性 data-slide-to.

Answer 3

最简单的方法是用 data-target 和 data-slide-to 属性标记外部控件。 data-target 通过 id 标识轮播，而 data-slide-to 使用整数（从 0 开始）标识轮播中的幻灯片。
请参阅下面的示例，其中包含纯 Bootstrap 4 标记且没有附加 javascript.

<div class="d-flex">
    <!-- “External” carousel controls -->
    <div id="external-controls" class="col-auto btn-group-vertical" role="group" aria-label="External carousel buttons">
        <button class="btn btn-primary" data-target="#main-carousel" data-slide-to="0" type="button">First slide</button>
        <button class="btn btn-primary" data-target="#main-carousel" data-slide-to="1" type="button">Second slide</button>
        <button class="btn btn-primary" data-target="#main-carousel" data-slide-to="2" type="button">Last slide</button>
    </div>

    <!-- Carousel -->
    <div id="main-carousel" class="carousel slide" data-ride="carousel">
        <div class="carousel-inner">
            <div class="carousel-item active">
                <img class="d-block w-100" src="http://placehold.it/400x225/422040/fff?text=Slide+1" alt="First slide">
            </div>
            <div class="carousel-item">
                <img class="d-block w-100" src="http://placehold.it/400x225/e57a44/fff?text=Slide+2" alt="Second slide">
            </div>
            <div class="carousel-item">
                <img class="d-block w-100" src="http://placehold.it/400x225/e3d985/fff?text=Slide+3" alt="Third slide">
            </div>
        </div>
    </div>
</div>


<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.min.js"></script>

除此之外，您始终可以通过 javascript 使用 .carousel(number) 方法来滑动到特定的幻灯片项目。
所以，如果您想创建一个自定义的——可能更简单的——标记，您可以通过编写如下内容来实现。

$('#external-controls').on('click', 'a', function(event) {
    event.preventDefault();
    
    // `this` is the clicked <a> tag
    // `$.index()` returns the position of `this` relative to its sibling elements
    var target = $(this).index();
    $('#main-carousel').carousel(target);
})

<div class="d-flex">
    <!-- “External” carousel controls -->
    <div id="external-controls" class="col-auto btn-group-vertical" role="group" aria-label="External carousel buttons">
        <a class="btn btn-primary" href="#">First slide</a>
        <a class="btn btn-primary" href="#">Second slide</a>
        <a class="btn btn-primary" href="#">Last slide</a>
    </div>

    <!-- Carousel -->
    <div id="main-carousel" class="carousel slide" data-ride="carousel">
        <div class="carousel-inner">
            <div class="carousel-item active">
                <img class="d-block w-100" src="http://placehold.it/400x225/422040/fff?text=Slide+1" alt="First slide">
            </div>
            <div class="carousel-item">
                <img class="d-block w-100" src="http://placehold.it/400x225/e57a44/fff?text=Slide+2" alt="Second slide">
            </div>
            <div class="carousel-item">
                <img class="d-block w-100" src="http://placehold.it/400x225/e3d985/fff?text=Slide+3" alt="Third slide">
            </div>
        </div>
    </div>
</div>


<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.min.js"></script>

Bootstrap 4个轮播外部控件

Bootstrap 4 Carousel external controls

carousel

twitter-bootstrap-4