Слайдер Bootstrap Ken Burns Effect Carousel

Собрал слайдер Bootstrap Ken Burns Effect Carousel и теперь делюсь с читателями своего сайта. Согласитесь, стандартный плагин Bootstrap Carousel довольно скудный, имеющий всего один эффект, без анимации. Разработчики оправдывают это четкой работой слайдера в различных браузерах.

Данный Bootstrap Ken Burns Effect Carousel слайдер я протестировал в Google Chrome, Mozilla, Opera, Yandex. Работает корректно. И отлично подойдет для лендингов, тут можно сэкономить на скорости загрузки страницы. Если лендинг на Bootstrap, то не нужно подключать сторонние скрипты слайдера.

Слайдер Bootstrap Ken Burns Effect Carousel

Что внутри:

Внутри слайдера Bootstrap Ken Burns Effect Carousel стандартная сборка Bootstrap. Остановлюсь здесь на дополнениях.

• Файл index.html — разметка для ориентира помечена комментами;
• Файл animate.min.css — анимация, нужна для движения надписей в слайдере. Анимация взята отсюда http://daneden.github.io/animate.css/. Кто собирает лендинги, данная анимация должна быть хорошо знакома;
• Файл ken-burns.css — собственно CSS эффекты, для достижения Ken Burns Effect. Этот файл можно скопировать и добавить в пользовательский CSS шаблона;
• Файл custom.js — инициализация и настройки Bootstrap Ken Burns Effect Carousel;

Ну вот собственно и все.

Несколько советов по использованию слайдера Bootstrap Ken Burns Effect Carousel

Для стрелок навигации подключена полная библиотека иконочных шрифтов Font Awesome, но если вы больше не используете их в своем проекте, то лучше заменить их png иконками.

Изображения для данной Bootstrap Ken Burns Effect Carousel подбирайте по размеру примерно как в исходниках, лучше одинаковые по размерам.

Вопросы задавайте в комментариях. Исходники я залил на GitHub, ссылка для скачивания ниже.

Смотрите тмз на сайте.

Похожие по Тегам статьи

Создание Video Background HTML 5

В данной статье идет речь о создании video background — фоновой видео заставки HTML 5 веб страницы

Базовая сборка Bootstrap 3

Данный пост о том, как я настраиваю базовый шаблон Bootstrap 3 framework. Данную базовую…

Оформление текста в HTML — Выноски Callout

Публикую несколько примеров оформления текста в HTML. Выноски Callout нужны для заострения внимания читателя…