kiwimi v0.1.1

Kiwi MI

Библиотека javascript, включающая в себя слайдер и модальное окно, которые поддерживают полный список touch событий и адаптированы под мобильные устройства.

Два в одном

Kiwi MI представляет собой совокупность слайдера и модального окна. В большинстве своих проектов Вы рано или поздно сталкиваетесь с необходимостью сделать и то, и другое, но подключать их на свой сайт от разных разработчиков крайне не рекомендуется. В данном случае Вы получаете два веб приложения в одном.

Полная адаптивность и кроссплатформенность

Kiwi MI обеспечивает правильное отображение на различных устройствах. Таким образом, модальное окно динамически подстраивается под все возможные размеры экранов. Слайдер же берет размеры у родительского блока и автоматически подстраивает интерфейс под заданные размеры.

Полная поддержка Touch событий

Kiwi MI поддерживает события касаний: нажатия, перемещение, жесты двумя пальцами. С помощью нажатий вызывается окно, где располагается кнопка с активной ссылкой. С помощью свайпов (перемещений пальца) вправо и влево, осуществляется переход слайдов в выбранном направлении, а вот с помощью свайпа вверх, либо вниз, происходит закрытие модального окна. Жесты двумя пальцами используются для увеличения и уменьшения размера просматриваемого изображения.

Слайдер

Слайдер размещается в блоке и его размер полностью зависит от родительского элемента. Для добавления изображений в слайдер, необходимо добавить тег <img> внутрь выбранного блока. Для включения описания слайда, добавьте к <img> атрибут alt="описание". Для включения активной ссылки, добавьте к <img> атрибут k_url="ссылка".

Модальное окно

Вызывается при нажатии на изображение. Чтобы сделать активными только определенные изображения, необходимо добавить к ним атрибут k_modal="1". В ином случае, модальное окно будет срабатывать при нажатии по всем изображениям на сайте.

Установка

Подключение

CSS

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

JS

<script src="/dist/kiwimi.min.js"></script>

Инициализация

window.onload = function() {
  kiwimi.modal();
  kiwimi.slider('k_slider', 1, 3);
}

• kiwimi.modal(); - вызов модального окна
• kiwimi.slider('k_slider', 1, 3); - вызов слайдера
• где ‘k_slider’ - id блока, в котором будет слайдер,
• 1 - настройки автоматического переключения слайдов (1 - включено, 0 - отключено)
• 3 - время в секундах, необходимое для переключения слайдов (по умолчанию 3 секунды)