The carousel is used to make slideshow of content like images, text and custom markup. Carousel is build some languages like HTML5, CSS3 and Javascript. The previous and next controls and indicator can be build with carousel. Keep in mind that nested carousel are not supported in carousel property.
Basic example of Carousel
In this example carousel class is used to make images changes
at the defualt time while the slide class is used to make a
carousel in slideshow. While all the image are in carousel-inner
box and the carousel-item class is used for items like images
or text to make a slide show.
<divid="carouselExampleOfWebtags"class="carousel slide"data-ride="carousel"><divclass="carousel-inner"><divclass="carousel-item active"><imgclass="d-block w-100"src="img/blog-img/1.jpg"alt="Slide No. #1"></div><divclass="carousel-item"><imgclass="d-block w-100"src="img/blog-img/2.jpg"alt="Slide No. #2"></div><divclass="carousel-item"><imgclass="d-block w-100"src="img/blog-img/3.jpg"alt="Slide No. #3"></div></div></div>
Output of above code
Basic example of Carousel With indicators
In this example carousel is with indicators. An ordered list of
carousel-indicators is build with carousel-indicators
class. The data-target attribute is used to target the
indicators. The data-slide-to attribute is used to make
a sequence of slide to make a slideshow with indicators. While
carousel class is used to make images changes
at the defualt time while the slide class is used to make a
carousel in slideshow. While all the image are in carousel-inner
box and the carousel-item class is used for items like images
or text to make a slide show.
<divid="carouselIndicatorsWebtags"class="carousel slide"data-ride="carousel"><olclass="carousel-indicators"><lidata-target="#carouselIndicatorsWebtags"data-slide-to="0"class="active"></li><lidata-target="#carouselIndicatorsWebtags"data-slide-to="1"></li><lidata-target="#carouselIndicatorsWebtags"data-slide-to="2"></li></ol><divclass="carousel-inner"><divclass="carousel-item active"><imgclass="d-block w-100"src="img/blog-img/1.jpg"alt="First slide"></div><divclass="carousel-item"><imgclass="d-block w-100"src="img/blog-img/2.jpg"alt="Second slide"></div><divclass="carousel-item"><imgclass="d-block w-100"src="img/blog-img/1.jpg"alt="Third slide"></div></div><aclass="carousel-control-prev"href="#carouselIndicatorsWebtags"role="button"data-slide="prev"><spanclass="carousel-control-prev-icon"aria-hidden="true"></span><spanclass="sr-only">Previous</span></a><aclass="carousel-control-next"href="#carouselIndicatorsWebtags"role="button"data-slide="next"><spanclass="carousel-control-next-icon"aria-hidden="true"></span><spanclass="sr-only">Next</span></a></div>
Output of above code
The Best
Comment here
If you have any query, if you want to know something about any of technical course related to computer science field, if you have any suggestion about relevant to uploaded content or if you anything wrong here (any mistake in content) than please contact us. Keep in mind, comment should be according to community guidelines.
