I see the indicators in the carousel where I can click an element to go to the next slider or the previous slider. Is it possible to directly slide to a specified carousel item from controls external to the carousel?
I was trying to add an external panel (to the carousel component) with links to specific slides. I'm trying to do something like the jquery news slider used at easy-quiz.net. This is a jquery extention and have the callback working to change the highlighted item but want to be able to click one of the items and get the carousel to focus on the corresponding item.
The easiest thing to achieve that is to mark up the external controls both with the data-target and the data-slide-to attributes. data-target identifies the carousel by id, while data-slide-to identifies the slide within the carousel with an integer (starting with 0).
Please see the example below with pure Bootstrap 4 markup and without additional 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>Other than that, you can always use the .carousel(number) method via javascript in order to slide to a specific slide item.
So, in case you would like to create a custom –maybe simpler– markup, you could do so by writing up something as follows.
$('#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>