Timeline slider

714 07 May 2020

No Description Available

Abhishek Singh

~ onex

Related Elements

6708
1
0

Why Choose us Four Column

onex

3514
1
0

This is a multiple-input fields generator that can generate or add or create multiple input fields dynamically at a time.

Dynamically Create Form fields

onex

3461
12
0

Grid service list with lighten

onex

2852
15
0

Awesome services section in gr

onex

2162
1
0

Our process section in Bootstr

onex

2049
1
0

This sidebar contact form is used to get user query form the same page.

Sidebar contact form

onex



<div class="container">
  <h1 class="title">Responsive Timeline Slider</h1>
  <div class="timeline">
    <div class="swiper-container">
      <div class="swiper-wrapper">
        <div class="swiper-slide" style="background-image: url(https://picsum.photos/1920/500?random=1);" data-year="2000">
          <div class="swiper-slide-content"><span class="timeline-year">2000</span>
            <h4 class="timeline-title">Your Event Title</h4>
            <p class="timeline-text">Lorem ipsum dolor site amet, consectetur adipscing elit, sed do eisumod tempor incididut ut labore et dolore magna aliqua. Ut enim ad mimim venjam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
          </div>
        </div>
        <div class="swiper-slide" style="background-image: url(https://picsum.photos/1920/500?random=2);" data-year="2002">
          <div class="swiper-slide-content"><span class="timeline-year">2002</span>
            <h4 class="timeline-title">Your Event Title</h4>
            <p class="timeline-text">Lorem ipsum dolor site amet, consectetur adipscing elit, sed do eisumod tempor incididut ut labore et dolore magna aliqua. Ut enim ad mimim venjam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
          </div>
        </div>
        <div class="swiper-slide" style="background-image: url(https://picsum.photos/1920/500?random=3);" data-year="2003">
          <div class="swiper-slide-content"><span class="timeline-year">2003</span>
            <h4 class="timeline-title">Your Event Title</h4>
            <p class="timeline-text">Lorem ipsum dolor site amet, consectetur adipscing elit, sed do eisumod tempor incididut ut labore et dolore magna aliqua. Ut enim ad mimim venjam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
          </div>
        </div>
        <div class="swiper-slide" style="background-image: url(https://picsum.photos/1920/500?random=4);" data-year="2005">
          <div class="swiper-slide-content"><span class="timeline-year">2005</span>
            <h4 class="timeline-title">Your Event Title</h4>
            <p class="timeline-text">Lorem ipsum dolor site amet, consectetur adipscing elit, sed do eisumod tempor incididut ut labore et dolore magna aliqua. Ut enim ad mimim venjam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
          </div>
        </div>
        <div class="swiper-slide" style="background-image: url(https://picsum.photos/1920/500?random=5);" data-year="2009">
          <div class="swiper-slide-content"><span class="timeline-year">2009</span>
            <h4 class="timeline-title">Your Event Title</h4>
            <p class="timeline-text">Lorem ipsum dolor site amet, consectetur adipscing elit, sed do eisumod tempor incididut ut labore et dolore magna aliqua. Ut enim ad mimim venjam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
          </div>
        </div>
        <div class="swiper-slide" style="background-image: url(https://picsum.photos/1920/500?random=6);" data-year="2012">
          <div class="swiper-slide-content"><span class="timeline-year">2012</span>
            <h4 class="timeline-title">Your Event Title</h4>
            <p class="timeline-text">Lorem ipsum dolor site amet, consectetur adipscing elit, sed do eisumod tempor incididut ut labore et dolore magna aliqua. Ut enim ad mimim venjam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
          </div>
        </div>
      </div>
      <div class="swiper-button-prev"></div>
      <div class="swiper-button-next"></div>
      <div class="swiper-pagination"></div>
    </div>
  </div>
</div>

Get HTML

Get CSS

Get JS

Timeline slider

Abhishek Singh

Related Elements

Why Choose us Four Column

Dynamically Create Form fields

Grid service list with lighten

Awesome services section in gr

Our process section in Bootstr

Sidebar contact form

Resourse

Log in