Responsive Bootstrap 5 Image Slider carousel autoplay…

Carousels Bootstrap 5Free+ CSS+ JS

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.

8.6k views156 downloads5 years ago

gosnippets.com/preview/responsive-bootstrap-5-image-slider-carousel-autoplay…

Source Code

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

More Carousels snippets

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.

CarouselsView →

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.

CarouselsView →

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.

CarouselsView →

Comments(0)

No comments yet — be the first to start the discussion.

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