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

slidr-breadcrumbs.png

Хлебные крошки имеют простую 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.