타임라인 슬라이드 Timeline.js

기업의 연혁이나 기업의 역사등의 컨텐츠에 적용하면 괜찮을 

jquery 라이브러리 입니다.

다운로드 경로

https://github.com/ilkeryilmaz/timelinejs

사용법

Include the jQuery library and plugin:

<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script type="text/javascript" src="dist/js/timeline.min.js"></script>

Include the plugin css file:

<link rel="stylesheet" href="dist/css/timeline.min.css" />

Html markup:

<div class="timeline-container timeline-theme-1">
    <div class="timeline js-timeline">
        <div data-time="2017">your content or markup</div>
        <div data-time="2016">your content or markup</div>
        <div data-time="2015">your content or markup</div>
        <div data-time="2014">your content or markup</div>
        <div data-time="2013">your content or markup</div>
    </div>
</div>

Start Plugin:

$('.js-timeline').Timeline();

Examples

Default

$('.timeline-1').Timeline();

Dots Position and Custom Item Class Example:

$('.timeline-2').Timeline({
  itemClass: 'box-item',
  dotsPosition: 'top',
  startItem: 'last'
});

Mode Vertical and Autoplay Example:

$('.timeline-2').Timeline({
  autoplay: true,
  mode: 'vertical',
  itemClass: 'box-item',
});

자동실행, dots 포지션 위치변경, 슬라이드 좌우, 상하 설정등 옵션도 다양해서 

활용용도가 많을거 같습니다.

결과화면

your content or markup 2017

your content or markup 2016

your content or markup 2015

your content or markup 2014

your content or markup 2013