Add a carousel to your UI with Animated Slider Blog Card using HTML & CSS snippet. Free Bootstrap 5 code — HTML & CSS ready to copy, MIT licensed.
1<div class="blog-card">
2 <input type="radio" name="select" id="tap-1" checked>
3 <input type="radio" name="select" id="tap-2">
4 <input type="radio" name="select" id="tap-3">
5 <input type="checkbox" id="imgTap">
6 <div class="sliders">
7 <label for="tap-1" class="tap tap-1"></label>
8 <label for="tap-2" class="tap tap-2"></label>
9 <label for="tap-3" class="tap tap-3"></label>
10 </div>
11<div class="inner-part">
12 <label for="imgTap" class="img">
13 <img class="img-1" src="https://gosnippets.com/blog/wp-content/uploads/2020/11/Bootstrap-5-Pricing-Table-2-1536x812.jpg">
14 </label>
15 <div class="content content-1">
16 <span>26 December 2020</span>
17 <div class="title">
18Lorem Ipsum Dolor</div>
19<div class="text">
20Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo animi atque aliquid pariatur voluptatem numquam, quisquam. Neque est voluptates doloribus!</div>
21<button>Read more</button>
22 </div>
23</div>
24<div class="inner-part">
25 <label for="imgTap" class="img">
26 <img class="img-2" src="https://gosnippets.com/blog/wp-content/uploads/2020/10/Bootstrap-Animation-1536x1024.jpg">
27 </label>
28 <div class="content content-2">
29 <span>28 December 2020</span>
30 <div class="title">
31Lorem Ipsum Dolor</div>
32<div class="text">
33Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum eos ut consectetur numquam ullam fuga animi laudantium nobis rem molestias.</div>
34<button>Read more</button>
35 </div>
36</div>
37<div class="inner-part">
38 <label for="imgTap" class="img">
39 <img class="img-3" src="https://gosnippets.com/blog/wp-content/uploads/2021/01/Screenshot-from-2021-01-10-20-52-16.png">
40 </label>
41 <div class="content content-3">
42 <span>29 December 2020</span>
43 <div class="title">
44Lorem Ipsum Dolor</div>
45<div class="text">
46Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod excepturi nemo commodi sint eum ipsam odit atque aliquam officia impedit.</div>
47<button>Read more</button>
48 </div>
49</div>
50</div>
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.
Comments(0)
No comments yet — be the first to start the discussion.
Sign in to join the conversation.