Bootstrap 4 Carousel/Slider component

For creating slideshows of images or marketing text or some other content, you may use the carousel component of Bootstrap 4 Framework.

The built-in features allow you creating carousel where images or custom content can slide. Optionally, you may also include controls for moving slides manually. You may also add indicators for letting the users know which slide they are on by using built-in features.

I will show all these examples plus how to customize the carousel in Bootstrap 4 for multiple images, vertical slider and more; so keep reading.

An example of simple sliding carousel

Let us go step by step for using various built-in capabilities of Bootstrap 4 carousel. The first example simply slides three images with default speed. The default interval for sliding image/content is 5000 MS (5 seconds). Have a look:

Bootstrap 4 carousel images

See online demo and code

The code:

For creating simple slider, use the .carousel and .slider classes in the main <div> element. In that div element, assign the ID that is unique and can be used in JavaScript (as I will show in the examples below).

The inner div elements are assigned the .carousel-item classes. To make a slide default as the web page loads, use the active class.

Changing the slider interval example

Five seconds sounds so high for simple image slider or still want to increase the interval between two slides? No problem, use the data-interval=”” data attribute or interval option in the jQuery code.

See the demo where I used 2000 ms value in the JavaScript. There I used the ID of the carousel as follows:

See online demo and code

The markup remains the same as in above example. Only this code of jQuery is added above the </body> tag:

See the complete code and output on the example page.

Adding the next/previous controls in carousel example

The <a> tags are used for linking the slides navigation with div ID of the carousel component. The icons are specified in the <span> tag. You may use third party icons like font-awesome there as well.

Have a look:

Bootstrap 4 carousel controls

See online demo and code

The markup for the demo:

You can also see that three seconds interval is used for this example.

The example of adding indicators in carousel

The indicators will help the visitors knowing which slides they are currently on and if they wish can move quickly to the desired slide by next/previous arrows.

The indicators are added by using the <ul> and <ol> tags and using the .carousel-indicators class in the <ul> tag as follows:

Bootstrap 4 carousel indicators

See online demo and code

See the demo online and grab the complete code.

Next thing – adding captions to slides example

Use the .carousel-caption in the element where carousel item is created by using .carousel-item class (generally a div).

There, you may use any headings, paragraphs, buttons, links etc as part of the content for the specific slide in the carousel.

In the following demo, I have used the same carousel as in above example and added headings, text in a paragraph and a button by using various classes of Bootstrap 4:

Bootstrap4 carousel captions

See online demo and code

The markup:

A demo of Bootstrap 4 vertical slider/carousel

There is no specific built-in CSS or JavaScript in Bootstrap 4 for creating a vertical slider like a carousel. So, you have to use custom stuff if you intend to create a carousel based on Bootstrap 4 where slides move vertically.

See the demo below where custom CSS is used for moving the slides vertically. The captions and other custom content for the demo are added to the fourth carousel item. The indicators are also used as in above horizontal sliders:

See online demo and code

The markup and script for the example:

Get the full code including required CSS on the demo page’s code section.

Next / Previous / Pause methods example

We have seen using the controls for moving to the next or previous slides. You may also use the carousel built-in methods: next, previous and pause for moving to the next or previous slide while the pause method can be used to stop the sliding.

You may attach these methods to buttons outside of the carousel or using other elements e.g. links.

In this example, three buttons are created where these methods are attached.

Bootstrap4 carousel buttons

See online demo and code

The carousel with buttons markup:

The script for associating buttons with actions:

Adding button controls in vertical carousel example

Similarly, these buttons can be attached to the vertical carousel for enabling visitors navigating and pausing the slideshow. Have a look:

See online demo and code

You can see and grab the complete code on the example page.

An example of creating multi-item carousel

By using grid classes within the carousel items, you may create a carousel with multiple items sliding at a time.

See this demo where three images will slide and next three images will come to the front and the cycle goes on.

Bootstrap4 multi item carousel

See online demo and code

The markup and script for this demo:

Sliding only one item in the multiple sliding images carousel is coming soon.