Адаптивный слайдер 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

<!-- Style Slider -->
<link href="http://atmpl.ru/design/adaptive-slider/2015/bootstrap-atmpl/slider-bootstrap-slideFullIn.css" rel="stylesheet" />
<!-- /Style Slider -->
<div id="myCarousel" class="carousel slide carousel-slideFullIn" data-ride="carousel">
 <ol class="carousel-indicators">
 <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
 <li data-target="#myCarousel" data-slide-to="1"></li>
 <li data-target="#myCarousel" data-slide-to="2"></li>
 </ol>
 <div class="carousel-inner">
 <div class="item active">
 <img src="http://atmpl.ru/assets/img/home-bg.jpg" alt="Адаптивные элементы для сайта">
 <div class="container">
 <div class="carousel-caption">
<h1><span class="glyphicon glyphicon-star-empty"></span> aTmpl <span class="glyphicon glyphicon-star-empty"></span></h1>
<p style="color:#fff;">Адаптивные элементы для сайта</p>
 <p><a class="btn btn-lg btn-opacity" href="/" role="button">Смотреть</a></p>
 </div>
 </div>
 </div>
 <div class="item">
 <img src="http://atmpl.ru/assets/img/design-bg.jpg" alt="Адаптивный дизайн для сайта">
 <div class="container">
 <div class="carousel-caption">
<h1><span class="glyphicon glyphicon-star-empty"></span> aTmpl <span class="glyphicon glyphicon-star-empty"></span></h1>
<p style="color:#fff;">Адаптивный дизайн для сайта</p>
 <p><a class="btn btn-lg btn-opacity" href="/publ" role="button">Смотреть</a></p>
 </div>
 </div>
 </div>
 <div class="item">
<img src="http://atmpl.ru/assets/img/templates-bg1.jpg" alt="Адаптивные шаблоны для сайта">
 <div class="container">
 <div class="carousel-caption">
<h1><span class="glyphicon glyphicon-star-empty"></span> aTmpl <span class="glyphicon glyphicon-star-empty"></span></h1>
<p style="color:#fff;">Адаптивные шаблоны для сайта</p>
 <p><a class="btn btn-lg btn-opacity" href="/load" role="button">Смотреть</a></p>
 </div>
 </div>
 </div>
 </div>
 <a class="left carousel-control" href="#myCarousel" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a>
 <a class="right carousel-control" href="#myCarousel" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a>
 </div>

<!-- Style Slider -->
<link href="http://atmpl.ru/design/adaptive-slider/2015/bootstrap-atmpl/slider-bootstrap-slideFullOut.css" rel="stylesheet" />
<!-- /Style Slider -->
<div id="myCarousel" class="carousel slide carousel-slideFullOut" data-ride="carousel">
 <ol class="carousel-indicators">
 <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
 <li data-target="#myCarousel" data-slide-to="1"></li>
 <li data-target="#myCarousel" data-slide-to="2"></li>
 </ol>
 <div class="carousel-inner">
 <div class="item active">
 <img src="http://atmpl.ru/assets/img/home-bg.jpg" alt="Адаптивные элементы для сайта">
 <div class="container">
 <div class="carousel-caption">
<h1><span class="glyphicon glyphicon-star-empty"></span> aTmpl <span class="glyphicon glyphicon-star-empty"></span></h1>
<p style="color:#fff;">Адаптивные элементы для сайта</p>
 <p><a class="btn btn-lg btn-opacity" href="/" role="button">Смотреть</a></p>
 </div>
 </div>
 </div>
 <div class="item">
 <img src="http://atmpl.ru/assets/img/design-bg.jpg" alt="Адаптивный дизайн для сайта">
 <div class="container">
 <div class="carousel-caption">
<h1><span class="glyphicon glyphicon-star-empty"></span> aTmpl <span class="glyphicon glyphicon-star-empty"></span></h1>
<p style="color:#fff;">Адаптивный дизайн для сайта</p>
 <p><a class="btn btn-lg btn-opacity" href="/publ" role="button">Смотреть</a></p>
 </div>
 </div>
 </div>
 <div class="item">
<img src="http://atmpl.ru/assets/img/templates-bg1.jpg" alt="Адаптивные шаблоны для сайта">
 <div class="container">
 <div class="carousel-caption">
<h1><span class="glyphicon glyphicon-star-empty"></span> aTmpl <span class="glyphicon glyphicon-star-empty"></span></h1>
<p style="color:#fff;">Адаптивные шаблоны для сайта</p>
 <p><a class="btn btn-lg btn-opacity" href="/load" role="button">Смотреть</a></p>
 </div>
 </div>
 </div>
 </div>
 <a class="left carousel-control" href="#myCarousel" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a>
 <a class="right carousel-control" href="#myCarousel" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a>
 </div>

<!-- Style Slider -->
<link href="http://atmpl.ru/design/adaptive-slider/2015/bootstrap-atmpl/slider-bootstrap-slideFullOutLeft.css" rel="stylesheet" />
<!-- /Style Slider -->
<div id="myCarousel" class="carousel slide carousel-slideFullOutLeft" data-ride="carousel">
 <ol class="carousel-indicators">
 <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
 <li data-target="#myCarousel" data-slide-to="1"></li>
 <li data-target="#myCarousel" data-slide-to="2"></li>
 </ol>
 <div class="carousel-inner">
 <div class="item active">
 <img src="http://atmpl.ru/assets/img/home-bg.jpg" alt="Адаптивные элементы для сайта">
 <div class="container">
 <div class="carousel-caption">
<h1><span class="glyphicon glyphicon-star-empty"></span> aTmpl <span class="glyphicon glyphicon-star-empty"></span></h1>
<p style="color:#fff;">Адаптивные элементы для сайта</p>
 <p><a class="btn btn-lg btn-opacity" href="/" role="button">Смотреть</a></p>
 </div>
 </div>
 </div>
 <div class="item">
 <img src="http://atmpl.ru/assets/img/design-bg.jpg" alt="Адаптивный дизайн для сайта">
 <div class="container">
 <div class="carousel-caption">
<h1><span class="glyphicon glyphicon-star-empty"></span> aTmpl <span class="glyphicon glyphicon-star-empty"></span></h1>
<p style="color:#fff;">Адаптивный дизайн для сайта</p>
 <p><a class="btn btn-lg btn-opacity" href="/publ" role="button">Смотреть</a></p>
 </div>
 </div>
 </div>
 <div class="item">
<img src="http://atmpl.ru/assets/img/templates-bg1.jpg" alt="Адаптивные шаблоны для сайта">
 <div class="container">
 <div class="carousel-caption">
<h1><span class="glyphicon glyphicon-star-empty"></span> aTmpl <span class="glyphicon glyphicon-star-empty"></span></h1>
<p style="color:#fff;">Адаптивные шаблоны для сайта</p>
 <p><a class="btn btn-lg btn-opacity" href="/load" role="button">Смотреть</a></p>
 </div>
 </div>
 </div>
 </div>
 <a class="left carousel-control" href="#myCarousel" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a>
 <a class="right carousel-control" href="#myCarousel" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a>
 </div>

<!-- Style Slider -->
<link href="http://atmpl.ru/design/adaptive-slider/2015/bootstrap-atmpl/slider-bootstrap-slideFullOutTop.css" rel="stylesheet" />
<!-- /Style Slider -->
<div id="myCarousel" class="carousel slide carousel-slideFullOutTop" data-ride="carousel">
 <ol class="carousel-indicators">
 <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
 <li data-target="#myCarousel" data-slide-to="1"></li>
 <li data-target="#myCarousel" data-slide-to="2"></li>
 </ol>
 <div class="carousel-inner">
 <div class="item active">
 <img src="http://atmpl.ru/assets/img/home-bg.jpg" alt="Адаптивные элементы для сайта">
 <div class="container">
 <div class="carousel-caption">
<h1><span class="glyphicon glyphicon-star-empty"></span> aTmpl <span class="glyphicon glyphicon-star-empty"></span></h1>
<p style="color:#fff;">Адаптивные элементы для сайта</p>
 <p><a class="btn btn-lg btn-opacity" href="/" role="button">Смотреть</a></p>
 </div>
 </div>
 </div>
 <div class="item">
 <img src="http://atmpl.ru/assets/img/design-bg.jpg" alt="Адаптивный дизайн для сайта">
 <div class="container">
 <div class="carousel-caption">
<h1><span class="glyphicon glyphicon-star-empty"></span> aTmpl <span class="glyphicon glyphicon-star-empty"></span></h1>
<p style="color:#fff;">Адаптивный дизайн для сайта</p>
 <p><a class="btn btn-lg btn-opacity" href="/publ" role="button">Смотреть</a></p>
 </div>
 </div>
 </div>
 <div class="item">
<img src="http://atmpl.ru/assets/img/templates-bg1.jpg" alt="Адаптивные шаблоны для сайта">
 <div class="container">
 <div class="carousel-caption">
<h1><span class="glyphicon glyphicon-star-empty"></span> aTmpl <span class="glyphicon glyphicon-star-empty"></span></h1>
<p style="color:#fff;">Адаптивные шаблоны для сайта</p>
 <p><a class="btn btn-lg btn-opacity" href="/load" role="button">Смотреть</a></p>
 </div>
 </div>
 </div>
 </div>
 <a class="left carousel-control" href="#myCarousel" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a>
 <a class="right carousel-control" href="#myCarousel" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a>
 </div>

<!-- Style Slider -->
<link href="http://atmpl.ru/design/adaptive-slider/2015/bootstrap-atmpl/slider-bootstrap-slideOpacity.css" rel="stylesheet" />
<!-- /Style Slider -->
<div id="myCarousel" class="carousel slide carousel-slideOpacity" data-ride="carousel">
 <ol class="carousel-indicators">
 <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
 <li data-target="#myCarousel" data-slide-to="1"></li>
 <li data-target="#myCarousel" data-slide-to="2"></li>
 </ol>
 <div class="carousel-inner">
 <div class="item active">
 <img src="http://atmpl.ru/assets/img/home-bg.jpg" alt="Адаптивные элементы для сайта">
 <div class="container">
 <div class="carousel-caption">
<h1><span class="glyphicon glyphicon-star-empty"></span> aTmpl <span class="glyphicon glyphicon-star-empty"></span></h1>
<p style="color:#fff;">Адаптивные элементы для сайта</p>
 <p><a class="btn btn-lg btn-opacity" href="/" role="button">Смотреть</a></p>
 </div>
 </div>
 </div>
 <div class="item">
 <img src="http://atmpl.ru/assets/img/design-bg.jpg" alt="Адаптивный дизайн для сайта">
 <div class="container">
 <div class="carousel-caption">
<h1><span class="glyphicon glyphicon-star-empty"></span> aTmpl <span class="glyphicon glyphicon-star-empty"></span></h1>
<p style="color:#fff;">Адаптивный дизайн для сайта</p>
 <p><a class="btn btn-lg btn-opacity" href="/publ" role="button">Смотреть</a></p>
 </div>
 </div>
 </div>
 <div class="item">
<img src="http://atmpl.ru/assets/img/templates-bg1.jpg" alt="Адаптивные шаблоны для сайта">
 <div class="container">
 <div class="carousel-caption">
<h1><span class="glyphicon glyphicon-star-empty"></span> aTmpl <span class="glyphicon glyphicon-star-empty"></span></h1>
<p style="color:#fff;">Адаптивные шаблоны для сайта</p>
 <p><a class="btn btn-lg btn-opacity" href="/load" role="button">Смотреть</a></p>
 </div>
 </div>
 </div>
 </div>
 <a class="left carousel-control" href="#myCarousel" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a>
 <a class="right carousel-control" href="#myCarousel" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a>
 </div>

<!-- Style Slider -->
<link href="http://atmpl.ru/design/adaptive-slider/2015/bootstrap-atmpl/slider-bootstrap-slidePinwheel.css" rel="stylesheet" />
<!-- /Style Slider -->
<div id="myCarousel" class="carousel slide carousel-slidePinwheel" data-ride="carousel">
 <ol class="carousel-indicators">
 <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
 <li data-target="#myCarousel" data-slide-to="1"></li>
 <li data-target="#myCarousel" data-slide-to="2"></li>
 </ol>
 <div class="carousel-inner">
 <div class="item active">
 <img src="http://atmpl.ru/assets/img/home-bg.jpg" alt="Адаптивные элементы для сайта">
 <div class="container">
 <div class="carousel-caption">
<h1><span class="glyphicon glyphicon-star-empty"></span> aTmpl <span class="glyphicon glyphicon-star-empty"></span></h1>
<p style="color:#fff;">Адаптивные элементы для сайта</p>
 <p><a class="btn btn-lg btn-opacity" href="/" role="button">Смотреть</a></p>
 </div>
 </div>
 </div>
 <div class="item">
 <img src="http://atmpl.ru/assets/img/design-bg.jpg" alt="Адаптивный дизайн для сайта">
 <div class="container">
 <div class="carousel-caption">
<h1><span class="glyphicon glyphicon-star-empty"></span> aTmpl <span class="glyphicon glyphicon-star-empty"></span></h1>
<p style="color:#fff;">Адаптивный дизайн для сайта</p>
 <p><a class="btn btn-lg btn-opacity" href="/publ" role="button">Смотреть</a></p>
 </div>
 </div>
 </div>
 <div class="item">
<img src="http://atmpl.ru/assets/img/templates-bg1.jpg" alt="Адаптивные шаблоны для сайта">
 <div class="container">
 <div class="carousel-caption">
<h1><span class="glyphicon glyphicon-star-empty"></span> aTmpl <span class="glyphicon glyphicon-star-empty"></span></h1>
<p style="color:#fff;">Адаптивные шаблоны для сайта</p>
 <p><a class="btn btn-lg btn-opacity" href="/load" role="button">Смотреть</a></p>
 </div>
 </div>
 </div>
 </div>
 <a class="left carousel-control" href="#myCarousel" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a>
 <a class="right carousel-control" href="#myCarousel" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a>
 </div>

<!-- Style Slider -->
<link href="http://atmpl.ru/design/adaptive-slider/2015/bootstrap-atmpl/slider-bootstrap-slideRotate.css" rel="stylesheet" />
<!-- /Style Slider -->
<div id="myCarousel" class="carousel slide carousel-slideRotate" data-ride="carousel">
 <ol class="carousel-indicators">
 <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
 <li data-target="#myCarousel" data-slide-to="1"></li>
 <li data-target="#myCarousel" data-slide-to="2"></li>
 </ol>
 <div class="carousel-inner">
 <div class="item active">
 <img src="http://atmpl.ru/assets/img/home-bg.jpg" alt="Адаптивные элементы для сайта">
 <div class="container">
 <div class="carousel-caption">
<h1><span class="glyphicon glyphicon-star-empty"></span> aTmpl <span class="glyphicon glyphicon-star-empty"></span></h1>
<p style="color:#fff;">Адаптивные элементы для сайта</p>
 <p><a class="btn btn-lg btn-opacity" href="/" role="button">Смотреть</a></p>
 </div>
 </div>
 </div>
 <div class="item">
 <img src="http://atmpl.ru/assets/img/design-bg.jpg" alt="Адаптивный дизайн для сайта">
 <div class="container">
 <div class="carousel-caption">
<h1><span class="glyphicon glyphicon-star-empty"></span> aTmpl <span class="glyphicon glyphicon-star-empty"></span></h1>
<p style="color:#fff;">Адаптивный дизайн для сайта</p>
 <p><a class="btn btn-lg btn-opacity" href="/publ" role="button">Смотреть</a></p>
 </div>
 </div>
 </div>
 <div class="item">
<img src="http://atmpl.ru/assets/img/templates-bg1.jpg" alt="Адаптивные шаблоны для сайта">
 <div class="container">
 <div class="carousel-caption">
<h1><span class="glyphicon glyphicon-star-empty"></span> aTmpl <span class="glyphicon glyphicon-star-empty"></span></h1>
<p style="color:#fff;">Адаптивные шаблоны для сайта</p>
 <p><a class="btn btn-lg btn-opacity" href="/load" role="button">Смотреть</a></p>
 </div>
 </div>
 </div>
 </div>
 <a class="left carousel-control" href="#myCarousel" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a>
 <a class="right carousel-control" href="#myCarousel" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a>
 </div>

<!-- Style Slider -->
<link href="http://atmpl.ru/design/adaptive-slider/2015/bootstrap-atmpl/slider-bootstrap-slideRubber.css" rel="stylesheet" />
<!-- /Style Slider -->
<div id="myCarousel" class="carousel slide carousel-slideRubber" data-ride="carousel">
 <ol class="carousel-indicators">
 <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
 <li data-target="#myCarousel" data-slide-to="1"></li>
 <li data-target="#myCarousel" data-slide-to="2"></li>
 </ol>
 <div class="carousel-inner">
 <div class="item active">
 <img src="http://atmpl.ru/assets/img/home-bg.jpg" alt="Адаптивные элементы для сайта">
 <div class="container">
 <div class="carousel-caption">
<h1><span class="glyphicon glyphicon-star-empty"></span> aTmpl <span class="glyphicon glyphicon-star-empty"></span></h1>
<p style="color:#fff;">Адаптивные элементы для сайта</p>
 <p><a class="btn btn-lg btn-opacity" href="/" role="button">Смотреть</a></p>
 </div>
 </div>
 </div>
 <div class="item">
 <img src="http://atmpl.ru/assets/img/design-bg.jpg" alt="Адаптивный дизайн для сайта">
 <div class="container">
 <div class="carousel-caption">
<h1><span class="glyphicon glyphicon-star-empty"></span> aTmpl <span class="glyphicon glyphicon-star-empty"></span></h1>
<p style="color:#fff;">Адаптивный дизайн для сайта</p>
 <p><a class="btn btn-lg btn-opacity" href="/publ" role="button">Смотреть</a></p>
 </div>
 </div>
 </div>
 <div class="item">
<img src="http://atmpl.ru/assets/img/templates-bg1.jpg" alt="Адаптивные шаблоны для сайта">
 <div class="container">
 <div class="carousel-caption">
<h1><span class="glyphicon glyphicon-star-empty"></span> aTmpl <span class="glyphicon glyphicon-star-empty"></span></h1>
<p style="color:#fff;">Адаптивные шаблоны для сайта</p>
 <p><a class="btn btn-lg btn-opacity" href="/load" role="button">Смотреть</a></p>
 </div>
 </div>
 </div>
 </div>
 <a class="left carousel-control" href="#myCarousel" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a>
 <a class="right carousel-control" href="#myCarousel" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a>
 </div>

<!-- Style Slider -->
<link href="http://atmpl.ru/design/adaptive-slider/2015/bootstrap-atmpl/slider-bootstrap-slideSequence.css" rel="stylesheet" />
<!-- /Style Slider -->
<div id="myCarousel" class="carousel slide carousel-slideSequence" data-ride="carousel">
 <ol class="carousel-indicators">
 <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
 <li data-target="#myCarousel" data-slide-to="1"></li>
 <li data-target="#myCarousel" data-slide-to="2"></li>
 </ol>
 <div class="carousel-inner">
 <div class="item active">
 <img src="http://atmpl.ru/assets/img/home-bg.jpg" alt="Адаптивные элементы для сайта">
 <div class="container">
 <div class="carousel-caption">
<h1><span class="glyphicon glyphicon-star-empty"></span> aTmpl <span class="glyphicon glyphicon-star-empty"></span></h1>
<p style="color:#fff;">Адаптивные элементы для сайта</p>
 <p><a class="btn btn-lg btn-opacity" href="/" role="button">Смотреть</a></p>
 </div>
 </div>
 </div>
 <div class="item">
 <img src="http://atmpl.ru/assets/img/design-bg.jpg" alt="Адаптивный дизайн для сайта">
 <div class="container">
 <div class="carousel-caption">
<h1><span class="glyphicon glyphicon-star-empty"></span> aTmpl <span class="glyphicon glyphicon-star-empty"></span></h1>
<p style="color:#fff;">Адаптивный дизайн для сайта</p>
 <p><a class="btn btn-lg btn-opacity" href="/publ" role="button">Смотреть</a></p>
 </div>
 </div>
 </div>
 <div class="item">
<img src="http://atmpl.ru/assets/img/templates-bg1.jpg" alt="Адаптивные шаблоны для сайта">
 <div class="container">
 <div class="carousel-caption">
<h1><span class="glyphicon glyphicon-star-empty"></span> aTmpl <span class="glyphicon glyphicon-star-empty"></span></h1>
<p style="color:#fff;">Адаптивные шаблоны для сайта</p>
 <p><a class="btn btn-lg btn-opacity" href="/load" role="button">Смотреть</a></p>
 </div>
 </div>
 </div>
 </div>
 <a class="left carousel-control" href="#myCarousel" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a>
 <a class="right carousel-control" href="#myCarousel" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a>
 </div>

<!-- Style Slider -->
<link href="http://atmpl.ru/design/adaptive-slider/2015/bootstrap-atmpl/slider-bootstrap-slideShake.css" rel="stylesheet" />
<!-- /Style Slider -->
<div id="myCarousel" class="carousel slide carousel-slideShake" data-ride="carousel">
 <ol class="carousel-indicators">
 <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
 <li data-target="#myCarousel" data-slide-to="1"></li>
 <li data-target="#myCarousel" data-slide-to="2"></li>
 </ol>
 <div class="carousel-inner">
 <div class="item active">
 <img src="http://atmpl.ru/assets/img/home-bg.jpg" alt="Адаптивные элементы для сайта">
 <div class="container">
 <div class="carousel-caption">
<h1><span class="glyphicon glyphicon-star-empty"></span> aTmpl <span class="glyphicon glyphicon-star-empty"></span></h1>
<p style="color:#fff;">Адаптивные элементы для сайта</p>
 <p><a class="btn btn-lg btn-opacity" href="/" role="button">Смотреть</a></p>
 </div>
 </div>
 </div>
 <div class="item">
 <img src="http://atmpl.ru/assets/img/design-bg.jpg" alt="Адаптивный дизайн для сайта">
 <div class="container">
 <div class="carousel-caption">
<h1><span class="glyphicon glyphicon-star-empty"></span> aTmpl <span class="glyphicon glyphicon-star-empty"></span></h1>
<p style="color:#fff;">Адаптивный дизайн для сайта</p>
 <p><a class="btn btn-lg btn-opacity" href="/publ" role="button">Смотреть</a></p>
 </div>
 </div>
 </div>
 <div class="item">
<img src="http://atmpl.ru/assets/img/templates-bg1.jpg" alt="Адаптивные шаблоны для сайта">
 <div class="container">
 <div class="carousel-caption">
<h1><span class="glyphicon glyphicon-star-empty"></span> aTmpl <span class="glyphicon glyphicon-star-empty"></span></h1>
<p style="color:#fff;">Адаптивные шаблоны для сайта</p>
 <p><a class="btn btn-lg btn-opacity" href="/load" role="button">Смотреть</a></p>
 </div>
 </div>
 </div>
 </div>
 <a class="left carousel-control" href="#myCarousel" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a>
 <a class="right carousel-control" href="#myCarousel" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a>
 </div>

<!-- Style Slider -->
<link href="http://atmpl.ru/design/adaptive-slider/2015/bootstrap-atmpl/slider-bootstrap-slideTop.css" rel="stylesheet" />
<!-- /Style Slider -->
<div id="myCarousel" class="carousel slide carousel-slideTop" data-ride="carousel">
 <ol class="carousel-indicators">
 <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
 <li data-target="#myCarousel" data-slide-to="1"></li>
 <li data-target="#myCarousel" data-slide-to="2"></li>
 </ol>
 <div class="carousel-inner">
 <div class="item active">
 <img src="http://atmpl.ru/assets/img/home-bg.jpg" alt="Адаптивные элементы для сайта">
 <div class="container">
 <div class="carousel-caption">
<h1><span class="glyphicon glyphicon-star-empty"></span> aTmpl <span class="glyphicon glyphicon-star-empty"></span></h1>
<p style="color:#fff;">Адаптивные элементы для сайта</p>
 <p><a class="btn btn-lg btn-opacity" href="/" role="button">Смотреть</a></p>
 </div>
 </div>
 </div>
 <div class="item">
 <img src="http://atmpl.ru/assets/img/design-bg.jpg" alt="Адаптивный дизайн для сайта">
 <div class="container">
 <div class="carousel-caption">
<h1><span class="glyphicon glyphicon-star-empty"></span> aTmpl <span class="glyphicon glyphicon-star-empty"></span></h1>
<p style="color:#fff;">Адаптивный дизайн для сайта</p>
 <p><a class="btn btn-lg btn-opacity" href="/publ" role="button">Смотреть</a></p>
 </div>
 </div>
 </div>
 <div class="item">
<img src="http://atmpl.ru/assets/img/templates-bg1.jpg" alt="Адаптивные шаблоны для сайта">
 <div class="container">
 <div class="carousel-caption">
<h1><span class="glyphicon glyphicon-star-empty"></span> aTmpl <span class="glyphicon glyphicon-star-empty"></span></h1>
<p style="color:#fff;">Адаптивные шаблоны для сайта</p>
 <p><a class="btn btn-lg btn-opacity" href="/load" role="button">Смотреть</a></p>
 </div>
 </div>
 </div>
 </div>
 <a class="left carousel-control" href="#myCarousel" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a>
 <a class="right carousel-control" href="#myCarousel" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a>
 </div>

<!-- Style Slider -->
<link href="http://atmpl.ru/design/adaptive-slider/2015/bootstrap-atmpl/slider-bootstrap-slideWobble.css" rel="stylesheet" />
<!-- /Style Slider -->
<div id="myCarousel" class="carousel slide carousel-slideWobble" data-ride="carousel">
 <ol class="carousel-indicators">
 <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
 <li data-target="#myCarousel" data-slide-to="1"></li>
 <li data-target="#myCarousel" data-slide-to="2"></li>
 </ol>
 <div class="carousel-inner">
 <div class="item active">
 <img src="http://atmpl.ru/assets/img/home-bg.jpg" alt="Адаптивные элементы для сайта">
 <div class="container">
 <div class="carousel-caption">
<h1><span class="glyphicon glyphicon-star-empty"></span> aTmpl <span class="glyphicon glyphicon-star-empty"></span></h1>
<p style="color:#fff;">Адаптивные элементы для сайта</p>
 <p><a class="btn btn-lg btn-opacity" href="/" role="button">Смотреть</a></p>
 </div>
 </div>
 </div>
 <div class="item">
 <img src="http://atmpl.ru/assets/img/design-bg.jpg" alt="Адаптивный дизайн для сайта">
 <div class="container">
 <div class="carousel-caption">
<h1><span class="glyphicon glyphicon-star-empty"></span> aTmpl <span class="glyphicon glyphicon-star-empty"></span></h1>
<p style="color:#fff;">Адаптивный дизайн для сайта</p>
 <p><a class="btn btn-lg btn-opacity" href="/publ" role="button">Смотреть</a></p>
 </div>
 </div>
 </div>
 <div class="item">
<img src="http://atmpl.ru/assets/img/templates-bg1.jpg" alt="Адаптивные шаблоны для сайта">
 <div class="container">
 <div class="carousel-caption">
<h1><span class="glyphicon glyphicon-star-empty"></span> aTmpl <span class="glyphicon glyphicon-star-empty"></span></h1>
<p style="color:#fff;">Адаптивные шаблоны для сайта</p>
 <p><a class="btn btn-lg btn-opacity" href="/load" role="button">Смотреть</a></p>
 </div>
 </div>
 </div>
 </div>
 <a class="left carousel-control" href="#myCarousel" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a>
 <a class="right carousel-control" href="#myCarousel" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a>
 </div>

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

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

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

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

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

Скачать с GitHub

Рейтинг: 4.8/5 из 13

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