Image slider with multiple controls and mobile swipe…: a hand-crafted, open-source Bootstrap 5 carousel. HTML, CSS & JS included, ready to copy.
1<div class="container">
2 <div class="slider">
3
4 <div class="box1 box">
5 <div class="bg"></div>
6 <div class="details">
7 <h1>I'm the first Box</h1>
8 <p>
9 Lorem ipsum dolor sit amet, consectetur adipiscing
10 elit. Integer lacinia dui lectus. Donec scelerisque ipsum
11 diam, ac mattis orci pellentesque eget.
12 </p>
13 <button>Check Now</button>
14 </div>
15
16 <div class="illustration"><div class="inner"></div></div>
17 </div>
18
19
20 <div class="box2 box">
21 <div class="bg"></div>
22 <div class="details">
23 <h1>I'm the second Box</h1>
24 <p>
25 Lorem ipsum dolor sit amet, consectetur adipiscing
26 elit. Integer lacinia dui lectus. Donec scelerisque ipsum
27 diam, ac mattis orci pellentesque eget.
28 </p>
29 <button>Check Now</button>
30 </div>
31
32 <div class="illustration"><div class="inner"></div></div>
33 </div>
34
35 <div class="box3 box">
36 <div class="bg"></div>
37 <div class="details">
38 <h1>I'm the third Box</h1>
39 <p>
40 Lorem ipsum dolor sit amet, consectetur adipiscing
41 elit. Integer lacinia dui lectus. Donec scelerisque ipsum
42 diam, ac mattis orci pellentesque eget.
43 </p>
44 <button>Check Now</button>
45 </div>
46
47 <div class="illustration"><div class="inner"></div></div>
48 </div>
49
50 <div class="box4 box">
51 <div class="bg"></div>
52 <div class="details">
53 <h1>I'm the fourth Box</h1>
54 <p>
55 Lorem ipsum dolor sit amet, consectetur adipiscing
56 elit. Integer lacinia dui lectus. Donec scelerisque ipsum
57 diam, ac mattis orci pellentesque eget.
58 </p>
59 <button>Check Now</button>
60 </div>
61
62 <div class="illustration"><div class="inner"></div></div>
63 </div>
64
65 <div class="box5 box">
66 <div class="bg"></div>
67 <div class="details">
68 <h1>I'm the fifth Box</h1>
69 <p>
70 Lorem ipsum dolor sit amet, consectetur adipiscing
71 elit. Integer lacinia dui lectus. Donec scelerisque ipsum
72 diam, ac mattis orci pellentesque eget.
73 </p>
74 <button>Check Now</button>
75 </div>
76
77 <div class="illustration"><div class="inner"></div></div>
78 </div>
79
80 </div>
81
82 <svg xmlns="http://www.w3.org/2000/svg" class="prev" width="56.898" height="91" viewBox="0 0 56.898 91"><path d="M45.5,0,91,56.9,48.452,24.068,0,56.9Z" transform="translate(0 91) rotate(-90)" fill="#fff"/></svg>
83 <svg xmlns="http://www.w3.org/2000/svg" class="next" width="56.898" height="91" viewBox="0 0 56.898 91"><path d="M45.5,0,91,56.9,48.452,24.068,0,56.9Z" transform="translate(56.898) rotate(90)" fill="#fff"/></svg>
84 <div class="trail">
85 <div class="box1 active">1</div>
86 <div class="box2">2</div>
87 <div class="box3">3</div>
88 <div class="box4">4</div>
89 <div class="box5">5</div>
90 </div>
91 </div>
92 <script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/gsap-latest-beta.min.js"></script>
93 <script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/CSSRulePlugin3.min.js"></script>
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
13
Views
6
Likes
Comments(0)
No comments yet — be the first to start the discussion.
Sign in to join the conversation.