jQuery

【jQuery】タイムラインスライダーを簡単に作成するTimeline.js

May 7, 2017
timeline

Timeline.jsは簡単にタイムラインスライダーを作成するためのjQueryプラグイン。

Getting Started

jQueryライブラリー、プラグイン

<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>

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>

スタートプラグイン

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

Options

$('.timeline').Timeline({
    mode: 'horizontal',
    // value: horizontal | vertical, default to horizontal
    itemClass: 'timeline-item',
    // value: item class
    dotsClass: 'timeline-dots',
    // value: dots item class
    activeClass: 'slide-active',
    // value: item and dots active class
    prevClass: 'slide-prev',
    // value: item and dots prev class
    nextClass: 'slide-next',
    // value: item and dots next class
    startItem: 'first', // first|last|number
    // value: first | last | number , default to first
    dotsPosition: 'bottom',
    // value: bottom | top, default to bottom
});