Carousel

Bootstrap Carousel
 A slideshow component for cycling
through elements—images or slides of
text
 The carousel is a slideshow for cycling through a
series of content, built with CSS 3D transforms
and a bit of JavaScript. It works with a series of
images, text, or custom mark-up. It also includes
support for previous/next controls and indicators.

How To Create a Carousel
Class Description
.carousel Creates a carousel
.carousel-indicators Adds indicators for the carousel. These are the little dots at the bottom of
each slide (which indicates how many slides there are in the carousel,
and which slide the user are currently viewing)
.carousel-inner Adds slides to the carousel
.carousel-item Specifies the content of each slide
.carousel-control-prev Adds a left (previous) button to the carousel, which allows the user to go
back between the slides
.carousel-control-next Adds a right (next) button to the carousel, which allows the user to go
forward between the slides
.carousel-control-prev-
icon
Used together with .carousel-control-prev to create a "previous" button
.carousel-control-next-
icon
Used together with .carousel-control-next to create a "next" button
.slide Adds a CSS transition and animation effect when sliding from one item to
the next. Remove this class if you do not want this effect

carousel plugin in Bootstrap
 Bootstrap CDN links:
<!– Bootstrap CSS –>
<link rel=”stylesheet”
href=”https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css”>
<!– jQuery –>
<script src=”https://code.jquery.com/jquery-3.3.1.slim.min.js” ></script>
<!– Proper.js –>
<script
src=”https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js”>
</script>
<!– Bootstrap JavaScript –>
<script
src=”https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js”></s
cript>

The Carousel Plugin
 The Carousel plugin is a component for cycling
through elements, like a carousel (slideshow).
 Tip: Plugins can be included individually (using
Bootstrap's individual "carousel.js" file), or all at
once (using "bootstrap.js" or "bootstrap.min.js").

The major use of the carousel plugin is to implement a slider or a slideshow of
images. The HTML div containing images can also contain text. In this section, we
are going to make a slide show of images with the help of the Bootstrap carousel
plugin using the following steps.
1. Create a HTML div element with class ‘carousel’. If you want to
slideshow the images automatically then also add a class ‘slide’ to it.
2. Give an id “carouselExampleControls” to the div element to control the
slideshow with buttons.
3. Add the “data-ride” attribute as “carousel” for triggering JavaScript
actions.
4. Inside the div create another nested div with class “carousel-inner”.
This div is going to contain all the carousel elements except the
buttons used to control the carousel.
5. Inside that div, create another div “carousel-item”. Add the class ‘active’
to the default carousel slide adding the image and caption of the
carousel slide. Add as many carousel items as you want.
6. Add the “carousel-control-prev” and the “carousel-control-next” class
to the previous and next slide links respectively.
7. Add the “data-slide” attributes as ‘prev’ and ‘next’ for the previous and
next icons of the carousel.

to change Bootstrap Carousel
Interval at Runtime ?
<script>
// Handle Bootstrap carousel slide event
$('.carousel').carousel({
interval: 100
});
</script>
In millisecond

<!-- Indicators -->
<ul class="carousel-indicators">
<li data-target="#demo" data-slide-to="0" class="active"></li>
<li data-target="#demo" data-slide-to="1"></li>
<li data-target="#demo" data-slide-to="2"></li>
</ul>
..carousel-indicators
{ margin: 0px; height: 0px;
}
.carousel-indicators ol {
width: 100%;
}
.carousel-indicators li {
height: 3px !important;
border-radius: 0px !important; width: 25%;
}

<!-- The slideshow -->
<div class="carousel-inner">
<div class="carousel-item active">
<img src=“1.jpg" alt=“image1">
</div>
<div class="carousel-item">
<img src=“2.jpg" alt=“image2">
</div>
<div class="carousel-item">
<img src=“2.jpg" alt=“image3">
</div>
</div>

<!-- Left and right controls -->
<a class="carousel-control-prev" href="#demo" data-slide="prev">
<span class="carousel-control-prev-icon"></span>
</a>
<a class="carousel-control-next" href="#demo" data-slide="next">
<span class="carousel-control-next-icon"></span>
</a>
The span tag is just like a div, which is used to group similar
content so it can all be styled together.