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.
27
Components
365
Views
6
Likes
Trending now
More Bootstrap snippets developers are viewing this week.
Explore a modern dashboard tile featuring vivid sparkline graphs and dynamic KPIs, perfect for real-time data visualization.
Experience a vibrant notification system with neon accents and auto-dismiss progress bars. Effortlessly stack and manage your alerts like never before.
Discover an interactive data insights dashboard with frosted glass design and vibrant animations that elevate your data visualization experience.
Comments(0)
No comments yet — be the first to start the discussion.
Sign in to join the conversation.