Timeline design example with Swiper - Timeline Progressbar

Loading…

Timeline design example with Swiper - Timeline Progressbar | GoSnippets

Source Code

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>

Timeline design example with Swiper - Timeline Progressbar

Source Code

More Utilities snippets

Comments(0)