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.

Note: A newer tutorial based on Bootstrap 5 is available: Bootstrap 5 Carousel

The built-in features allow you to create a 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 sliders, 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:

See online demo and code

The code:

</div>

</div>

</div>

For creating a 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 a 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 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:

$('#bs4-slide-carousel').carousel({

interval: 2000

})

</script>

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:

See online demo and code

The markup for the demo:

<h3>Bootstrap 4 Carousel Demo</h2>

</div>

</div>

</div>

<span class="sr-only">Previous</span>

</a>

</a>

</div>

$('#bs4-slide-carousel').carousel({

interval: 3000

})

</script>

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 know 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:

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 the above example and added headings, text in a paragraph, and a button by using various classes of Bootstrap 4:

See online demo and code

The markup:

100

101

102

103

104

105

106

107

108

109

110

111

<h3>Bootstrap 4 Carousel Demo</h2>

</ol>

<h5>The demo of using text in carousel Bootstrap</h5>

<p class="text-light">Another caption line goes here

</p>

</div>

</div>

<h5>The demo of using text in carousel Bootstrap</h5>

<p class="text-light">Another caption line goes here

</p>

</div>

</div>

<h5>The demo of using text in carousel Bootstrap</h5>

<p class="text-light">Another caption line goes here

</p>

</div>

</div>

<span class="sr-only">Previous</span>

</a>

</a>

</div>

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 in above horizontal sliders:

See online demo and code

The markup and script for the example:

<h3 class="text-success">A demo of vertical carousel in BS4</h3>

</ol>

</div>

</div>

</div>

<h5>Vertical Carousel Demo</h5>

<p class="text-light">Slides moving vertically rather default horizontal

</p>

</div>

</div>

$('#bs4-vertical-slide-carousel').carousel({

interval: 2000

})

</script>

Get the full code including the 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 use other elements e.g. links.

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

See online demo and code

The carousel with buttons markup:

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

<h3 class="text-success">Carousel with Buttons Demo</h3>

</ol>

<h5>The demo of using text in carousel Bootstrap</h5>

<p class="text-light">Another caption line goes here

</p>

</div>

</div>

<h5>The demo of using text in carousel Bootstrap</h5>

<p class="text-light">Another caption line goes here

</p>

</div>

</div>

<h5>The demo of using text in carousel Bootstrap</h5>

<p class="text-light">Another caption line goes here

</p>

</div>

</div>

<span class="sr-only">Previous</span>

</a>

</a>

</div>

<button class="btn btn-danger" id="btnPause">Pause</button>

</div>

The script for associating buttons with actions:

$('#bs4-slide-carousel').carousel({

interval: 3000

})

$('#btnPrev').on('click', function () {

$('#bs4-slide-carousel').carousel('prev');

})

$('#btnPause').on('click', function () {

$('#bs4-slide-carousel').carousel('pause');

})

$('#btnNext').on('click', function () {

$('#bs4-slide-carousel').carousel('next');

})

</script>

Adding button controls in vertical carousel example

Similarly, these buttons can be attached to the vertical carousel for enabling visitors to navigate and pause 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 the next three images will come to the front and the cycle goes on.

See online demo and code

The markup and script for this demo:

<h3>Bootstrap 4 Multi-item Carousel Demo</h2>

</div>

</div>

</div>

$('#bs4-multi-slide-carousel').carousel({

interval: 1500

})

</script>

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

Carousel, Sliders, slideshow

An example of simple sliding carousel

Changing the slider interval example

Adding the next/previous controls in carousel example

The example of adding indicators in carousel

Next thing – adding captions to slides example

A demo of Bootstrap 4 vertical slider/carousel

Next / Previous / Pause methods example

Adding button controls in vertical carousel example

An example of creating multi-item carousel

Related Tutorials: