The carousel component is a user interface element, which you'll see on a number of websites. It is essentially a slideshow that cycles through different elements, usually images. The carousel component should be contained inside a <div>
element with a class name of carousel
and a data-ride
attribute with a value of carousel
. To use the carousel component in your project, perform the following steps:
<ol>
, which renders as small circles in the browser and indicates which slide is currently active. The markup for this element is as follows:<ol class="carousel-indicators"> <li data-target="#carousel" data-slide-to="0" class="active"></li> <li data-target="#carousel" data-slide-to="1"></li> <li data-target="#carousel" data-slide-to="2"></li> </ol>
<div>
element with a class name of carousel-inner
needs to be created. This element will contain the actual slides and their content. The following markup creates such an element with one slide:<div class="carousel-inner" role="listbox"> <div class="carousel-item active"> <img src="~/img/slide1.jpg" alt="Slide no.1"> </div> <div class="carousel-item"> <img src="~/img/slide2.jpg" alt="Slide no.2"> </div> <div class="carousel-item"> <img src="~/img/slide3.jpg" alt="Slide no.3"> </div> </div>
<div>
element:<a class="left carousel-control" href="#carousel" role="button" data-slide="prev"> <span class="icon-prev" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="right carousel-control" href="#carousel" role="button" data-slide="next"> <span class="icon-next" aria-hidden="true"></span> <span class="sr-only">Next</span> </a>
data-interval
attribute. In the following markup, we set the interval between slides to 10
seconds:<div id="carousel" class="carousel slide" data-ride="carousel" data-interval="10000">
10
seconds:$(function () { $('#carousel').carousel({ interval: 10000 }); });
<div>
element with a class name of .carousel-caption
to the .carousel-item
element, as illustrated in the following code:<div class="carousel-item"> <img src="~/img/slide3.jpg" alt="Slide no.3"> <div class="carousel-caption"> <h3>A rainy day</h3> <p>Rain against a windscreen.</p> </div> </div>
Take a look at following screenshot:
18.223.206.69