Timeline slider

3652 07 May 2020

No Description Available

Abhishek Singh

~ onex

Related Elements

10434
1
0

Slick marquee slider - manage HTML marquee with slick javascript library.

Slick Carousel Marquee Demo

onex

10285
1
0

Why Choose us Four Column

onex

10151
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

7297
12
0

Grid service list with lighten

onex

7280
1
0

Tesseract js demo scan text over the image by just doing small amounts of code.

Tesseract Js demo

onex

7128
0
0

Cropperjs is a feature-rich pure javascript library for cropping image. using this you can able to able to provide image cropping to the client-side.

client-side image cropping by

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

Slick Carousel Marquee Demo

Why Choose us Four Column

Dynamically Create Form fields

Grid service list with lighten

Tesseract Js demo

client-side image cropping by

Resourse

Log in