Add a carousel to your UI with Responsive Bootstrap 5 Image Slider carousel autoplay…. Free Bootstrap 5 code — HTML, CSS & JS ready to copy, MIT licensed.
1<div class="slider" id="slider1">
2 <div style="background-image:url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/30256/1200_110627-8240-Myst.jpg)"></div>
3 <div style="background-image:url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/30256/Gif-pont-lueur-600.gif)"></div>
4 <div style="background-image:url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/30256/1200_Sharpened-version.jpg)"></div>
5 <div style="background-image:url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/30256/jungle.jpg)"></div>
6 <div style="background-image:url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/30256/1200_bodie-11.jpg)"></div>
7
8 <i class="left" class="arrows" style="z-index:2; position:absolute;"><svg viewBox="0 0 100 100">
9 <path d="M 10,50 L 60,100 L 70,90 L 30,50 L 70,10 L 60,0 Z"></path>
10 </svg></i>
11 <i class="right" class="arrows" style="z-index:2; position:absolute;"><svg viewBox="0 0 100 100">
12 <path d="M 10,50 L 60,100 L 70,90 L 30,50 L 70,10 L 60,0 Z" transform="translate(100, 100) rotate(180) "></path>
13 </svg></i>
14 <span class="titleBar">
15 <h1>This Slider has all default settings.</h1>
16 </span>
17</div>
18
19<br>
20
21<div class="row2Wrap">
22
23 <div class="slider" id="slider2">
24
25 <div style="background-image:url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/30256/blurredBeachGrassCloseup.jpg)"></div>
26 <div style="background-image:url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/30256/1200_110627-8240-Myst.jpg)"></div>
27 <div style="background-image:url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/30256/1200_bodie-11.jpg)"></div>
28 <div style="background-image:url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/30256/jungle.jpg)"></div>
29
30 <i class="left" class="arrows" style="z-index:2; position:absolute;">
31 <svg viewBox="0 0 100 100">
32 <path d="M 10,50 L 60,100 L 70,90 L 30,50 L 70,10 L 60,0 Z"></path>
33 </svg>
34 </i>
35 <i class="right" class="arrows" style="z-index:2; position:absolute;">
36 <svg viewBox="0 0 100 100">
37 <path d="M 10,50 L 60,100 L 70,90 L 30,50 L 70,10 L 60,0 Z" transform="translate(100, 100) rotate(180) "></path>
38 </svg>
39 </i>
40 </div>
41
42 <div class="slider" id="slider3">
43 <div style="background-image:url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/30256/jungle.jpg)">
44 <span>
45 <h2>I'm a title for Slide #1</h2>
46 </span>
47 </div>
48 <div style="background-image:url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/30256/1200_110627-8240-Myst.jpg)">
49 <span>
50 <h2>I'm a title for Slide #2</h2>
51 </span>
52 </div>
53 <div style="background-image:url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/30256/1200_bodie-11.jpg)">
54 <span>
55 <h2>I'm a title for Slide #3</h2>
56 </span>
57 </div>
58 <i class="left" class="arrows" style="z-index:2; position:absolute;"><svg viewBox="0 0 100 100">
59 <path d="M 10,50 L 60,100 L 70,90 L 30,50 L 70,10 L 60,0 Z"></path>
60 </svg></i>
61 <i class="right" class="arrows" style="z-index:2; position:absolute;">
62 <svg viewBox="0 0 100 100">
63 <path d="M 10,50 L 60,100 L 70,90 L 30,50 L 70,10 L 60,0 Z" transform="translate(100, 100) rotate(180) "></path>
64 </svg></i>
65 </div>
66
67</div>
68 
Bootstrap 5 carousel with multiple cards
Free Bootstrap 5 carousel snippet — Bootstrap 5 carousel with multiple cards. Preview, copy HTML, CSS & JS, drop it into any Bootstrap 5 project.
Sliding tabs | CSS transitions only
Sliding tabs | CSS transitions only — a free Bootstrap 5 carousel snippet. Copy the HTML & CSS and paste straight into your Bootstrap 5 project.
Bootstrap Services in circle slider snippet
Bootstrap Services in circle slider snippet: a hand-crafted, open-source Bootstrap 5 carousel. HTML, CSS & JS included, ready to copy.
Hand-crafted Tailwind CSS components — HTML or React, copy-paste ready, with live previews. Free forever, MIT licensed, no sign-up to use.
24
Components
57
Views
6
Likes
Trending now
More Bootstrap snippets developers are viewing this week.
Comments(0)
No comments yet — be the first to start the discussion.
Sign in to join the conversation.