Timeline design example with Swiper - Timeline Progressbar: a hand-crafted, open-source Bootstrap 5 utility. HTML, CSS & JS included, ready to copy.
1<div class="container">
2 <div class="swiper-container-wrapper swiper-container-wrapper--timeline">
3 <!-- Timeline -->
4 <ul class="swiper-pagination-custom">
5 <li class='swiper-pagination-switch first active'><span class='switch-title'>1911</span></li>
6 <li class='swiper-pagination-switch'><span class='switch-title'>1970</span></li>
7 <li class='swiper-pagination-switch'><span class='switch-title'>2022</span></li>
8 <li class='swiper-pagination-switch last'><span class='switch-title'>3000</span></li>
9 </ul>
10 <!-- Progressbar -->
11 <div class="swiper-pagination swiper-pagination-progressbar swiper-pagination-horizontal"></div>
12 <!-- Swiper -->
13 <div class="swiper swiper-container swiper-container--timeline">
14 <div class="swiper-wrapper">
15 <!-- Slides -->
16 <div class="swiper-slide"><span class="title">Swiper Timeline Progressbar</span></div>
17 <div class="swiper-slide"><span class="title">Title 2</span></div>
18 <div class="swiper-slide"><span class="title">Title 3</span></div>
19 <div class="swiper-slide"><span class="title">Title 4</span></div>
20 </div>
21 </div>
22 </div>
23</div>
24<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js'></script>
25<script src='https://cdnjs.cloudflare.com/ajax/libs/Swiper/6.8.4/swiper-bundle.min.js'></script>
Auto move mouse cursor snippet
Auto move mouse cursor snippet: a hand-crafted, open-source Bootstrap 5 utility. HTML, CSS & JS included, ready to copy.
Bootstrap 5 Ecommerce Product Detail Page Design snippet
Free Bootstrap 5 utility snippet — Bootstrap 5 Ecommerce Product Detail Page Design snippet. Preview, copy HTML & CSS, drop it into any Bootstrap 5 project.
Bootstrap 5 Ecommerce single product page design template
Free Bootstrap 5 utility snippet — Bootstrap 5 Ecommerce single product page design template. Preview, copy HTML & CSS, drop it into any Bootstrap 5 project.
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.