Временная шкала на jQuery

demosourse

jQuery плагин для создания временной шкалы.

1.1. Установка через пакетного менеджера

Timeline.js можно установить через Bower и NPM.

bower install timelinejs-slider

npm install timelinejs-slider

1.2. Основы работы

Подключаем jQuery:

<script src="js/jquery.min.js"></script> <!-- >=1.11.2 -->
<script src="js/timeline.min.js"></script>

Подключаем css файл:

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

Html:

<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><!-- /.timeline-container -->

Запуск плагина:

$(function(){
  $('.js-timeline').Timeline();
});

Параметры

$('.timeline').Timeline({
  autoplay: false,
  // value: boolean | Автопроигрывание
  autoplaySpeed: 3000,
  // value: integer | Скорость
  mode: 'horizontal',
  // value: horizontal | vertical, по умолчанию horizontal
  itemClass: 'timeline-item',
  // value: класс
  dotsClass: 'timeline-dots',
  // value: класс точки
  activeClass: 'slide-active',
  // value: класс для точки oitem
  prevClass: 'slide-prev',
  // value: класс предыдущей точки
  nextClass: 'slide-next',
  // value: класс следующей точки
  startItem: 'first', // first|last|number
  // value: first | last | number , по умолчанию first
  dotsPosition: 'bottom',
  // value: bottom | top, default to bottom
  pauseOnHover: true,
  // value: boolean | Пауза при наведении мыши
  pauseOnDotsHover: false,
  // value: boolean | Пауза при наведении мыши на точку
});

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: https://github.com/ilkeryilmaz/timelinejs
Перевел: Станислав Протасевич
Урок создан: 5 Июня 2017
Просмотров: 22609
Правила перепечатки

5 последних уроков рубрики "jQuery"

^ Наверх ^