Адаптивный слайдер Bootstrap · aTmpl Effect

Cлайдер Bootstrap - aTmpl Effect

Адаптивный слайдер на основе плагина Bootstrap, добавлено 12 анимированных эффектов смены изображений, Вы можете посмотреть демо примеры работы слайдера и скачать бесплатно.

Настройка слайдера Bootstrap · aTmpl Effect

Подключение стилей слайдера

Каждый из 12 эффектов имеет свой файл CSS и подключите его на странице с подключенным слайдером в зоне <head>.

Подключение кода слайдера

Код слайдера имеет свой класс эффекта который находится в единственном числе и прописывается в совокупности с основными классами плагина class="carousel slide КЛАСС ЭФФЕКТА".

Дефолтные настройки слайдера

.carousel {
height: 500px; - Высота слайдера
.carousel .item {
height: 500px; - Высота слайдера
.carousel-inner > .item > img {
min-width: 100%; - Минимальная ширина картинок
height: 500px; - Высота слайдера
.carousel-caption h4 {
font-size:300%; - Резервные параметры при замене h1 на h4 (зависит от использования заголовка)
.carousel-caption h1 {
color:#fff; - Цвет заголовка
font-size:6rem; - Размер заголовка
font-family:Georgia; - Шрифт заголовка
.carousel-caption h1 span {
color:#fff; - Цвет звёзд
font-size:4rem; - Размер звёзд
text-shadow:none; - Тени отключены

Дополнительно применяется эффект анимации применённый к заголовку слайдера, название вращается через установленные значения времени.

Демо эффектов слайдера

Выберите эффект нажав на кнопку с названием эффекта и дождитесь загрузки слайдера. Ниже слайдера появится его код для установки, не забудьте отделить файл стилей от кода слайдера при установке на свой сайт.


slideFullIn slideFullOut slideFullOutLeft slideFullOutTop slideOpacity slidePinwheel slideRotate slideRubber slideSequence slideShake slideTop slideWobble

Параметры версии и лицензии

Версия слайдера Bootstrap · aTmpl Effect
V1.0
Лицензия слайдера Bootstrap · aTmpl Effect
MIT

Проверка кода для установки слайдера

Проверьте работоспособность кода для установки поместив его весь в редактор, нажмите на кнопку выполнения. Если страница результата не будет закрыта, после очередного выполнения данные на ней соответственно изменятся.

Скачать слайдер Bootstrap · aTmpl Effect

Скачать с GitHub

Рейтинг: 5.0/5 из 8



Добавлено Автор Ник Источник Просмотров Комментариев Теги
31-03-2015 Михаил Меренков aTmpl © 6275 0 адаптивный слайдер, слайдер с эффектами, слайдер bootstrap