slidr.js - слайдер на "чистом" javascript

Простой, легкий (21Кб в сжатом виде) слайдер, написанный на чистом Javascript, не имеющий никаких зависимостей, т.е. работает без jQuery.

Протестирован в следующих браузерах:

Chrome 26.0
Firefox 20.0
Safari 5.1.7
IE 10
Opera 16.0

Есть неполная поддержа IE8/9 (нет эффектов).

GitHub | Демо

Особенности

Вы можете добавить на страницу неограниченное количество слайдеров, даже разместить один в другом.
Изменяет размеры с зависимости от содержимого, но можно и запретить.
Навигация с помощью клавиатуры - когда курсор находится на слайдере, можно переключать слайдеры с стрелками.
Поддержка мобильных touch событий.

Подключение

Перед закрывающимся тегом </body> необходимо подключить slidr.js или slidr.min.js файл.

<script type="text/javascript" src="/path/to/slidr.min.js"></script>

HTML разметка

slidr.js может работать с любыми inline, inline-block, block элементами, имеющими аттрибут id. Допускается использовать любые дочерние элементы первого уровня с атрибутом data-slidr, например:

<ul id="slidr-ul" style="display: inline">
  <li data-slidr="one">apple</li>
  <li data-slidr="two">banana</li>
  <li data-slidr="three">coconut</li>
</ul>

<div id="slidr-img" style="display: inline-block">
  <img data-slidr="one" src="/static/images/apple.png"/>
  <img data-slidr="two" src="/static/images/banana.png"/>
  <img data-slidr="three" src="/static/images/coconut.png"/>
</div>

<div id="slidr-div" style="dislay: block">
  <div data-slidr="one">apple</div>
  <div data-slidr="two">banana</div>
  <div data-slidr="three">coconut</div>
</div>

Javascript

После подключения slidr.js станет доступен глобальный объект slidr. Самый простой способ создания slidr:

slidr.create('slidr-id').start();

Вызов с заданием всех настроек:

slidr.create('slidr-id', {
  after: function(e) { console.log('in: ' + e.in.slidr); },
  before: function(e) { console.log('out: ' + e.out.slidr); },
  breadcrumbs: true,
  controls: 'corner',
  direction: 'vertical',
  fade: false,
  keyboard: true,
  overflow: true,
  theme: '#222',
  timing: { 'cube': '0.5s ease-in' },
  touch: true,
  transition: 'cube'
}).start();

Настройки

Все доступные настройки для slidr.js приведены в таблице ниже.

Параметр	Тип	По умолч.	Description
`after`	function		callback-функция после смены слайда
`before`	function		callback-функция до смены слайда
`breadcrumbs`	bool	false	Показать хлебные крошки для управления слайдами. `true` или `false`.
`controls`	string	border	Расположение стрелок для управления слайдами. `border`, `corner` or`none`.
`direction`	string	horizontal	Направление по умолчанию для новых слайдов. `horizontal` или `h`,`vertical` или `v`.
`fade`	bool	true	Включить эффект затемнения для смены слайдов (fade-in/out). `true` или `false`.
`keyboard`	bool	false	Включить смену сладов с помощью клавиатуры. `true`или `false`.
`overflow`	bool	false	Включить overflow для блока со слайдером. `true` или`false`.
`pause`	bool	false	Не менять слайды автоматически при наведении мыши (необходимо запустить auto()). `true`или `false`.
`theme`	string	#fff	Цвет элементов управления слайдером (хлебных крошек и стрелок). `#hexcode` или`rgba(value)`.
`timing`	object	{}	Custom animation timings to apply. `{'transition': 'timing'}`.
`touch`	bool	false	Задействовать touch управление на мобильных устройствах. `true` или`false`.
`transition`	string	linear	Эффект смены слайдов. `cube`, `linear`, `fade` или `none`.

Функции обратного вызова after и before получают следующие данные:

{
  id: "slidr-id",
  in: {
    el: #<HTMLElement>,
    slidr: "data-slidr-in",
    trans: "transition-in",
    dir: "direction-in"
  },
  out: {
    el: #<HTMLElement>,
    slidr: "data-slidr-out",
    trans: "transition-out",
    dir: "direction-out"
  }
}

Slider.js global API

Глобальное пространство имен slidr предоставляет следующие функции:

/**
 * Текущая версия
 * @return {string} major.minor.patch.
 */
 function version() {};

/**
 * Доступные эффекты перехода.
 * @return {Array} of transitions.
 */
 function transitions() {};

/**
 * Создаёт и возвращает Slidr.
 * Вызов этой функции дважды на одном и том же элементе возвратит уже созданный объект Slidr.
 * @param {string} id элемента для Slidr.
 * @param {Object=} opt_settings Настройки для слайдера.
 */
 function create(id, opt_settings) {};

Slider API

// Инициализация Slidr со своими настройками
var s = slidr.create('slidr-api-demo', {
  breadcrumbs: true,
  overflow: true
});

// Добавить горизонтальные слайды со стандартным эффектом перехода.
// дублирующий элемент массива "one" в конце позводяет Slidr
// прокручивать слайды бесконечно
s.add('h', ['one', 'two', 'three', 'one']);

// Добавляет вертикальный слайд с эффектом перехода "куб".
s.add('v', ['five', 'four', 'three', 'five'], 'cube');

// Запуск слайдера.
s.start();

Короткая запись

var s = slidr.create('slidr-api-demo', {
  breadcrumbs: true,
  overflow: true
}).add('h', ['one', 'two', 'three', 'one'])
  .add('v', ['five', 'four', 'three', 'five'], 'cube')
  .start();

Полный список функци API Slidr.js представлен ниже

/**
 * Start the Slidr!
 * Automatically finds slides to create if nothing was added prior to calling start().
 * @param {string} opt_start `data-slidr` id to start on.
 * @return {this}
 */
 function start(opt_start) {};

/**
 * Check whether we can slide.
 * @param {string} next a direction ('up', 'down', 'left', 'right') or a `data-slidr` id.
 * @return {boolean}
 */
 function canSlide(next) {};

/**
 * Slide!
 * @param {string} next a direction ('up', 'down', 'left', 'right') or a `data-slidr` id.
 * @return {this}
 */
 function slide(next) {};

/**
 * Adds a set of slides.
 * @param {string} direction `horizontal || h` or `vertical || v`.
 * @param {Array} ids A list of `data-slidr` id's to add to Slidr. Slides must be direct children of the Slidr.
 * @param {string=} opt_transition The transition to apply between the slides, or uses the default.
 * @param {boolean=} opt_overwrite Whether to overwrite existing slide mappings/transitions if conflicts occur.
 * @return {this}
 */
 function add(direction, ids, opt_transition, opt_overwrite) {};

/**
 * Automatically advance to the next slide after a certain timeout. Calls start() if not already called.
 * @param {int=} opt_msec The number of millis between each slide transition. Defaults to 5000 (5 seconds).
 * @param {string=} opt_direction 'up', 'down', 'left', or 'right'. Defaults to 'right'.
 * @param {string=} opt_start The `data-slidr` id to start at (only works if auto is called to start the Slidr).
 * @return {this}
 */
 function auto(opt_msec, opt_direction, opt_start) {};

/**
 * Stop auto transition if it's turned on.
 * @return {this}
 */
 function stop() {};

/**
 * Set custom animation timings.
 * @param {string|Object} transition Either a transition name (i.e. 'cube'), or a {'transition': 'timing'} object.
 * @param {string=} opt_timing The new animation timing (i.e "0.5s ease-in"). Not required if transition is an object.
 * @return {this}
 */
 function timing(transition, opt_timing) {};

/**
 * Toggle breadcrumbs.
 * @return {this}
 */
 function breadcrumbs() {};

/**
 * Toggle controls.
 * @param {string=} opt_scheme Toggle on/off if not present, else change layout. 'border', `corner` or `none`.
 * @return {this}
 */
 function controls(opt_scheme) {};

Скрол страницы во время смены слайдов

В некоторых браузерах появляется этот неприятный баг. Чтобы исправить его нужно добавить стиль к body:

body {
  overflow: hidden;
}

Динамическое изменение размера

Slidr сам "понимает", нужно ли изменять размеры слайдера под изображение. Если у блока слайдера указаны размеры, то Slidr не будет автоматически их менять. Если указаны свойства min-width и min-height, то слайдер будет менять свой размер под контент, учитывая эти значения. В противном случае определение размеров будет проходить в автоматическом режиме.

Автоматическое изменение размеров

<div id="slidr-inline-dynamic" style="display: inline">
  <div data-slidr="one">good</div>
  <div data-slidr="two">gorgeous</div>
  <div data-slidr="three">unbelievable</div>
</div>

Статические размеры

<div id="slidr-inline-static" style="display: inline; width: 155px; height: 30px">
  <div data-slidr="one">good</div>
  <div data-slidr="two">gorgeous</div>
  <div data-slidr="three">unbelievable</div>
</div>

Элементы управления Slidr

Разметка элементов управления следующая:

<aside id="{slidr-id}-control">
  <div class="slidr-control up"></div>
  <div class="slidr-control down"></div>
  <div class="slidr-control left"></div>
  <div class="slidr-control right"></div>
</aside>

Вы можете кастомизировать любой элемент управления слайдером с помощью CSS селекторов:

aside[id="{slidr-id}-control"] .slidr-control.right {
  width: 50px !important;
  height: 50px !important;
  top: 50% !important;
  margin-top: -25px !important;
  right: -25px !important;
  border-radius: 25px;
  background: url('/static/images/arrow_right.png') 14px 13px no-repeat black;
  opacity: 0.4;
}

aside[id="{slidr-id}-control"] .slidr-control.right:hover {
  opacity: 1;
}

Элемент управления "стрелка" реализован с помощью псевдоселектора :after, поэтому, чтобы его скрыть, используйте следующий код:

// Hide a single arrow within a single controller.
aside[id="{slidr-id}-control"] .slidr-control.right:after {
  border-color: transparent !important;
}

// Hide all arrows within a single controller.
aside[id="{slidr-id}-control"] .slidr-control:after {
  border-color: transparent !important;
}

// Hide all Slidr arrows.
aside[id*="-control"] .slidr-control:after {
  border-color: transparent !important;   
}

Хлебные крошки Slidr

Хлебные крошки имеют простую HTML разметку. Каждый ul обозначает всю строку, а каждый li отдельную хлебную крошку:

<aside id="{slidr-id}-breadcrumbs">
  <ul class="slidr-breadcrumbs">
    <li></li>
    <li class="normal"></li>
    <li class="normal active"></li>
  </ul>
  ...
</aside>

Стилизация хлебных крошек с помощью CSS:

// Customize the position, size, border color and background color.
aside[id="{slidr-id}-breadcrumbs"] {
  right: 50% !important;
  margin-right: -41px !important;
}

aside[id="{slidr-id}-breadcrumbs"] .slidr-breadcrumbs li {
  width: 15px !important;
  height: 15px !important;
  margin: 3px !important;
}

aside[id="{slidr-id}-breadcrumbs"] .slidr-breadcrumbs li.normal {
  border-color: white !important;
}

aside[id="{slidr-id}-breadcrumbs"] .slidr-breadcrumbs li.active {
  background-color: black !important;
}

Лицензия

Это программное обеспечение может свободно использовать под лицензией MIT.