Carousel With Bootstrap 4

Carousel With Bootstrap 4 - It displays series of text, image and custom information to the user within certain duration. It also provides previous/next controls option to see the upcoming information or before displaying information and indicators that indicates active slider information.

Example

The bootstrap carousel is used to show text, image and custom information to the user within certain duration. It has controls options that shows upcoming or previous information.

Example

Source Code

          <div class="container mt-4 text-center">
  <div id="myCarouselslider" class="carousel slide" data-ride="carousel">
    <!-- Carousel indicators -->
    <ol class="carousel-indicators">
      <li data-target="#myCarouselslider" data-slide-to="0" class="active"></li>
      <li data-target="#myCarouselslider" data-slide-to="1"></li>
      <li data-target="#myCarouselslider" data-slide-to="2"></li>
    </ol>
    <!-- Wrapper for carousel items -->
    <div class="carousel-inner">
      <div class="carousel-item active">
        <img src="https://picsum.photos/seed/picsum/800/300" alt="First Slide" />
      </div>
      <div class="carousel-item">
        <img src="https://picsum.photos/seed/picsum/800/300" alt="Second Slide" />
      </div>
      <div class="carousel-item">
        <img src="https://picsum.photos/seed/picsum/800/300" alt="Third Slide" />
      </div>
    </div>
    <!-- Carousel controls -->
    <a class="carousel-control-prev" href="#myCarouselslider" data-slide="prev">
      <span class="carousel-control-prev-icon"></span>
    </a>
    <a class="carousel-control-next" href="#myCarouselslider" data-slide="next">
      <span class="carousel-control-next-icon"></span>
    </a>
  </div>
</div>
<!--/container-->

Try it now

Source Code: Output

          Class Description

			 Class
			 Description
		
			.carousel
			.carousel class Creates a carousel
		
			.carousel-indicators
			 .carousel-indicators indicates little dots at the bottom of each slide.Active indicators indicates user is veiwing current slider.
			
			.carousel-inner
			.carousel-inner	is a container for all carousel items.
		
			.carousel-item
			.carousel-item contains the text and image information.
		
			.carousel-control-prev
			.carousel-control-prev class provides a left (previous) button to the carousel that allows to see previous slides.	
			
			.carousel-control-next
			.carousel-control-next displays a a right (next) button to the carousel, that displays next slide information.

			.carousel-control-prev-icon
			.carousel-control-prev-icon	is used with .carousel-control-prev to create a "previous" button
			
			.carousel-control-next-icon
			.carousel-control-next-icon	is used with .carousel-control-next to create a "next" button
			
			.slide
			.slide creates a transition and animation  when sliding from one item to the next.

Class	Description
.carousel	.carousel class Creates a carousel
.carousel-indicators	.carousel-indicators indicates little dots at the bottom of each slide.Active indicators indicates user is veiwing current slider.
.carousel-inner	.carousel-inner is a container for all carousel items.
.carousel-item	.carousel-item contains the text and image information.
.carousel-control-prev	.carousel-control-prev class provides a left (previous) button to the carousel that allows to see previous slides.
.carousel-control-next	.carousel-control-next displays a a right (next) button to the carousel, that displays next slide information.
.carousel-control-prev-icon	.carousel-control-prev-icon is used with .carousel-control-prev to create a "previous" button
.carousel-control-next-icon	.carousel-control-next-icon is used with .carousel-control-next to create a "next" button
.slide	.slide creates a transition and animation when sliding from one item to the next.

Online Test / Quiz

Question set 1

Web Tutorials

Html Tutorial HTML

Javascript Tutorial JAVASCRIPT

Css Tutorial CSS

Bootstrap 5 Tutorial BOOTSTRAP 5

Bootstrap 4 Tutorial BOOTSTRAP 4