#Анимированное слайд-шоу
{
"require":{
"oduvanio/teremok":"~1"
}
}
Добавить в head
<script src="teremok.js"></script>
<link rel="stylesheet" href="teremok.css" />В любом месте html страницы добавить блок с классом teremok в котором будет анимация. Обязательный атрибут data-src до папки с картинками относительно корня проекта.
<div class="teremok" data-src="vendor/oduvanio/teremok/images/" style="height:400px"></div>Запустите скрипт, добавив в конце страницы:
<script>
Teremok.init();
</script>- composer
- php >= 5.4
- jquery
- Достаточно указать путь до папки
- С серверным кэшем, по умолчанию в корневой папке проекта /cache, создаётся автоматически
- Автоматическое изменение размера иллюстраций infrajs/imager
- Оптимальная исходная ширина картинки для показа на весь экран 2500px из расчёта что экран 1920px и для приближения ещё 30% запаса
- count:5 - ограничение на количество картинок в ротации
- indicators: true - индикаторы для смены картинок
С помощью infrjs/collect
Для добавления кнопки необходимо: 1. В структуре HTML файла в контейнер
добавить:
<a class="btn btn-info buttonTeremok" href="" infra="true">""</a>
2. В папке со слайдами создать одноименный файл с расширением .json, который обязательно должен содержать следующую информацию:
title - надпись на кнопке
href - ссылка на которую нужно перейти при клике по кнопке
styleBtn - стиль кнопки (класс)
Пример:
{ "title": "Подробнее", "href": "/certificate", "styleBtn": "btn-info" }