Hit enter after type your search item

Bootstrap 5 Carousel: Learn with 8 Demos

Carousel component in Bootstrap 5

  • In the previous version of Bootstrap (Bootstrap 3 Carousel), you had to use jQuery in order to use the carousel component.
  • In Bootstrap 5, this is no more required. Instead, it uses a little JavaScript and CSS 3D transforms.

Quick Demos Online:

What is a carousel?

A carousel is a slideshow component that you may use for various purposes on your website. For example, sliding the important marketing information with images.

  • A restaurant can use it for sliding different food deals.
  • A software product component may use it for sliding the product features.
  • E-commerce stores can use for special promotions with discounts, new arrivals.
  • And so many uses of this sliding component – like a carousel.

In this tutorial, we will show you examples of a basic to the advanced carousel with various features.

A simple example of Bootstrap 5 carousel

In the first example, we have a simple sliding images component like a carousel. The carousel is without any text, controls to move next/prev etc. Have a look at the code and output below:

See online demo and code

Bootstrap5-carousel-si


This is how the carousel is created:
  • The main <div> is assigned the .carousel and .slide. This creates a carousel.
  • In the next <div>, we assigned .carousel-inner class that adds slides to the carousel.
  • For specifying the image (and other info), we used another <div> and assigned the .carousel-item
  • Add as many div elements with this class as required.
  • Add .active class to .carousel-item for the slide that you want to show first as the web page loads. In our example, we assigned this to the third div.

An example of carousel with left/right controls

Adding to the above example, we have a carousel with left and right arrows. So, instead of just moving sliding images automatically, you are giving an option to the user to move quickly by using arrows.

See an example below:

See online demo and code

BS5-carousel-arrows


This is how arrows are added to the carousel:
  • Before the closing of the .carousel <div>, two <a> tags are used.
  • The first <a> is assigned .carousel-control-prev class and the second .carousel-control-next
  • Notice the href=”jazdemo”. This is mapped to the .carousel <div> id.
  • In the <span> tag, inside each <a> tag, the icon classes are assigned. The .carousel-control-prev-icon to the first <a> and .carousel-control-next-icon to the second <a> tag.

A carousel with indicators example

It’s another useful feature provided in the slideshow (like a carousel) to let users know which slide they are on. This might especially be useful for more sliding images.

The example below adds indicators to the above carousel – along with controls:

See online demo and code

BS5-carousel-indicator


So, how indicators are added in our demo?
  • After the main <div> containing .carousel class, an ordered list <ol> is added and .carousel-indicators class is assigned.
  • Then three <li> items, as per the number of slides in the carousel, are added.
  • Ensure that .active class is assigned to an <li>, otherwise, the carousel will not be visible.
  • See the other code for relating the slide to the indicator.

Adding information to sliding images

To make slide images with information, you may add captions easily. You may also manage to show information on the big screens and hide it on smartphones by using utility classes. First, see an example below:

See online demo and code

BS5-carousel-captions


How to add captions?

Just after the <img> tag for each slide, a <div> with .carousel-caption class is assigned.

There you can add headings like <h1> to <h6>, paragraphs, etc. for displaying the information as shown in the image.

Multiple image slider demo using Bootstrap 5

In the following demo, we have a carousel that displays multiple slides at one time. In the demo, four slides are displayed that adjust the image size per available width (display screen).

See online demo and code

BS5-multiple-slides


In the above code, note the CSS in the style section, markup, and JavaScript code before the </body> tag.

Credit:

https://codepen.io/hellomev/pen/LYORMQW

Changing the interval for slideshow

The default value for slides for automatically moving to the next slide is 5000 ms i.e. 5 seconds. You may change the interval by using the data attribute:

data-bs-interval = “3000” etc.

This applies to each carousel item separately.

In the example below we set the interval value as 1000 ms i.e. one second. Have a look:

See online demo and code

An example of creating vertical carousel in Bootstrap 5

The following example shows creating a carousel where slides move vertically.

In all our above examples, slides move horizontally whether it’s a single image slider or multiple.

In this example, you can see the indicators are visible on the right side and arrows for moving the slides towards the top and bottom of the slide.

You can test the example on your own by copying the complete code in your editor and just replacing the image paths:

See online demo and code

BS5-vertical-carousel


Credit for CSS:

Alessandro Battaglia

Making slideshow crossfade example

In all the above demos, (horizontal or vertical), the image moves in a sliding way. You can also create a carousel where next slide appears in a fading transition – easily.

For that, simply add the .carousel-fade class to the main <div> that contains .carousel. That’s it!

See online demo and code


Reference:

https://getbootstrap.com/docs/5.0/components/carousel/

This div height required for enabling the sticky sidebar