Bootstrap 5 Carousel

Bootstrap 5 Carousel

Bootstrap 5 carousel displays a series of text, images, and customs information to the user within a certain duration. It also provides the previous/next controls option to see the upcoming information or before displaying information and indicators that indicate active slider information.

Steps to create basic carousel:

  • Assign carousel container to unique id , .carousel ,.slide and data attribute data-bs-ride="carousel.Please keep in mind that .carousel is used for slide and .slide is used to provide animation and transition effect from one item to the next.
  • Provide .carousel-inner to the carousel container(having <div>.carousel) direct child.
  • Place .carousel-item inside every .carousel-inner element.Assign .active to any of the .acrousel-item to make active of the slide.
  • Place image inside .carousel-item element and provide .d-block &.w-100 to prevent the browser default image alignment.

Let us understand it with the help of an example.

Example

Source Code

Try it now

Source Code : Output

Code Explanation

Note: Follow the above mention concept to create a bootstrap basic carousel system.

Carousel With Controller

Steps to create bootstrap 5 carousel controller:

  • Assign carousel container to unique id , .carousel ,.slide and data attribute data-bs-ride="carousel.Please keep in mind that .carousel is used for slide and .slide is used to provide animation and transition effect from one item to the next.
  • Provide .carousel-inner to the carousel container(having <div>.carousel) direct child.
  • Place .carousel-item inside .carousel-inner element.Assign .active to any one of the .acrousel-item to make the active slide.
  • Place image inside .carousel-item element and provide .d-block &.w-100 to prevent the browser default image alignment.
  • Place two <button> or <a> inside carousel container so that prevous and next control can be created easily.
  • Assign .carousel-control-prev and data attribute data-bs-slide="prev" to first <button> or <a> and .carousel-control-next and data attribute data-bs-slide="next" to the second <button> or <a>.At the end assign data attribute data-bs-target="#carouselId" to both <button> or <a> and provide carousel container id to data-bs-target="#carouselId".Please keep in mind that assign carousel container id inside data attribute data-bs-target="#carouselId" is preceded by hash character(#).
  • To provide previous control and next control icon,inside <button> or <a> use .carousel-control-prev-icon to create previous control inside first <button> and .carousel-control-next-icon to create next control inside second <button> or <a>.Please keep in mind that two mention classes will be applied within <span> element that is exist inside <button>

Source Code

Try it now

Source Code : Output

Code Explanation

Note:Follow the above mention concept to create a bootstrap basic carousel controller system.

Carousel With Indicators

Steps to create bootstrap 5 carousel indicators :

  • Assign carousel container to unique id , .carousel ,.slide and data attribute data-bs-ride="carousel.Please keep in mind that .carousel is used for slide and .slide is used to provide animation and transition effect from one item to the next.
  • Provide .carousel-inner to the carousel container(having <div>.carousel) direct child.
  • Place .carousel-item inside .carousel-inner element .Assign .active to any one of the .acrousel-item to make the active slide.
  • Place image inside .carousel-item element and provide .d-block &.w-100 to prevent the browser default image alignment.
  • Place two <button> or <a> inside carousel container so that previous and next control can be created easily.
  • Assign .carousel-control-prev and data attribute data-bs-slide="prev" to first <button> or <a> and .carousel-control-next and data attribute data-bs-slide="next" to the second <button> or <a>.At the end assign data attribute data-bs-target="#carouselId" to both <button> or <a> and provide carousel container id to data-bs-target="#carouselId".Please keep in mind that assign carousel container id inside data attribute data-bs-target="#carouselId" is preceded by hash character(#).
  • To provide previous control and next control icon,inside <button> or <a> use .carousel-control-prev-icon to create previous control inside first <button> and .carousel-control-next-icon to create next control inside second <button> or <a>.Please keep in mind that two mention classes will be applied within <span> element that is exist inside <button>.
  • Place .carousel-indicators inside carousel container having .carousel.
  • Place <buttons> inside .carousel-indicators and assig data attribute data-bs-target="#carouselContainerId" data-bs-slide-to="{array index value}".Please keep in mind that data attribute data-bs-target is used to take the carousel container id while as data attribute data-bs-slide-to is used to provide array index value that is started with zero.
  • Assign .active to any one of the button to make that slide active.

Source Code

Try it now

Source Code : Output

Code Explanation

Note: Follow the above mention concept to create a bootstrap basic carousel controller system.

Carousel With Caption

Steps to create carousel with caption:

  • Assign carousel container to unique id , .carousel ,.slide and data attribute data-bs-ride="carousel.Please keep in mind that .carousel is used for slide and .slide is used to provide animation and transition effect from one item to the next.
  • Provide .carousel-inner to the carousel container(having <div>.carousel) direct child.
  • Place .carousel-item inside .carousel-inner element. Assign .active to any one of the .acrousel-item to make the active slide.
  • Place image inside .carousel-item element and provide .d-block &.w-100 to prevent the browser default image alignment.
  • Place two <button> or <a> inside carousel container so that prevous and next control can be created easily.
  • Assign .carousel-control-prev and data attribute data-bs-slide="prev" to first <button> or <a> and .carousel-control-next and data attribute data-bs-slide="next" to the second <button> or <a>.At the end assign data attribute data-bs-target="#carouselId" to both <button> or <a> and provide carousel container id to data-bs-target="#carouselId".Please keep in mind that assign carousel container id inside data attribute data-bs-target="#carouselId" is preceded by hash character(#).
  • To provide previous control and next control icon,inside <button> or <a> use .carousel-control-prev-icon to create previous control inside first <button> and .carousel-control-next-icon to create next control inside second <button> or <a>.Please keep in mind that two mention classes will be applied within <span> element that is exist inside <button>.
  • Place .carousel-indicatorsinside carousel container having .carousel.
  • Place <buttons> inside .carousel-indicators and assig data attribute data-bs-target="#carouselContainerId" data-bs-slide-to="{array index value}".Please keep in mind that data attribute data-bs-target is used to take the carousel container id while as data attribute data-bs-slide-to is used to provide array index value that is started with zero.
  • Assign .active to any one of the button to make that slide active.
  • To create caption inside carousel ,assign .carousel-caption ,.d-none,d-md-block to the element that is under .carousel-item.

Source Code

Try it now

Source Code : Output

Code Explanation

Note:Follow the above mention concept to create a bootstrap carousel system.

Online Test / Quiz