- Денис Горелов
- Bootstrap
- Просмотров: 0
Дополнительное видео
В данном уроке разберем, как реализовать такого рода слайд-шоу циклической смены элементов с возможностью адаптации под разные расширения экранов.
Слайдер с помощью Twitter Bootstrap 3
See the Pen VrEPbv by Denis (@Dwstroy) on CodePen.
Реализуем слайдер на Фреймворке bootstrap, который так же известен как Twitter Bootstrap. Для этого перейдем на сайт Bootstrap, скачаем его файлы к себе на компьютер, и данные файлы перенести в свою среду разработки.
Я заранее подготовил всю структуру, подключил их в их в index файле, а вы можете скачать весь архив по ссылка ниже.
Распакуйте его и перенесите все файлы в свою среду разработки.
Рассмотрим структуру архива
Пробежимся по его структуре архива, рассмотрим что в нем находится.
Открываем index файл, в самом верху подключена библиотека Jquery, за ней подключен фреймворк bootstrap с расширением js который находится в папке JS, за ним подключаем bootstrap с расширением CSS, и ниже подключаем файл, где будем писать свои стили, все это находится в папке CSS. В папке fonts, расположены иконки, которые использует bootstrap, в Img расположены картинки на слайдер и картинка на задний фон.
Это и есть весь шаблон, и вся его структура, далее приступим к описанию каркаса.
<head> <meta charset=utf-8> <title>Адаптивный слайдер</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script src="js/bootstrap.js"></script> <link rel="stylesheet" href="css/bootstrap.css" type="text/css"> <link rel="stylesheet" href="css/style.css" type="text/css"> </head>
Описываем каркас слайдера
Создаем блок div с идентификатором слайдера id="dws-slider", добавляем класс "carousel slide".
<div id="dws-slider" class="carousel slide" data-ride="carousel"> </div>
Далее делаем обертку для слайдов.
<!-- Обертка для слайдов --> <div class="carousel-inner" role="listbox"> </div>
Затем прописываем каждый элемент слайда в отдельном блоке и таких делаем три штуки.
(.item>img[src="img/slider-$.jpg"][alt="Картинка $"]+.carousel-caption>h3.text-uppercase+p)*3
И для того что бы отобразился первый слайд нужно добавить для первого элемента класс .active. Затем заполняем блоки текстовым содержанием.
<!-- Обертка для слайдов -->
<div class="carousel-inner" role="listbox">
<div class="item active"><img src="img/slider-1.jpg" alt="Картинка 1">
<div class="carousel-caption">
<h3 class="text-uppercase">Адаптивный слайдер</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin aliquet elit lorem, ac congue mi
eleifend sit amet. Sed dignissim viverra neque a tristique.</p>
</div>
</div>
<div class="item"><img src="img/slider-2.jpg" alt="Картинка 2">
<div class="carousel-caption">
<h3 class="text-uppercase">Анимированная прокрутка</h3>
<p>Aenean cursus imperdiet erat sit amet facilisis. Phasellus congue, sem in consectetur accumsan,
tellus risus sollicitudin mauris, quis ornare libero magna eget ex.</p>
</div>
</div>
<div class="item"><img src="img/slider-3.jpg" alt="Картинка 3">
<div class="carousel-caption">
<h3 class="text-uppercase">Простая установка</h3>
<p>Praesent dictum, orci eget eleifend auctor, urna ex dapibus odio, vitae pretium neque massa vel
neque. Donec et interdum diam. Morbi dignissim vestibulum mi ac viverra.</p>
</div>
</div>
</div>
Теперь добавим элементы управления по бокам слайдера.
<!-- Элементы управления --> <a class="left carousel-control" href="#dws-slider" role="button" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="right carousel-control" href="#dws-slider" role="button" data-slide="next"> <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> <span class="sr-only">Next</span> </a>
Остановим временно автолистинг.
<script>
$('.carousel').carousel({
interval: false
})
</script>
Добавим показатели прокрутки.
<ol class="carousel-indicators"> <li data-target="#dws-slider" data-slide-to="0" class="active"></li> <li data-target="#dws-slider" data-slide-to="1"></li> <li data-target="#dws-slider" data-slide-to="2"></li> </ol>
Описываем стили и анимацию
Перейдем в файл стилей и опишем блоки с текстом.
.carousel-inner h3 {
background-color: rgba(20, 49, 68, 0.6);
padding: 20px;
}
.carousel-inner p {
font-size: 18px;
background-color: rgba(30, 29, 29, 0.6);
padding: 20px;
}
Присвоим им ключевые кадры и сделаем анимацию.
.carousel-inner h3 {
background-color: rgba(20, 49, 68, 0.6);
padding: 20px;
animation: anim-H3 1.3s ease-out;
}
.carousel-inner p {
font-size: 18px;
background-color: rgba(30, 29, 29, 0.6);
padding: 20px;
animation: anim-P 1.6s ease-out;
}
@keyframes anim-H3 {
from {
opacity: 0;
transform: translateX(-2000px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
@keyframes anim-P {
from {
opacity: 0;
transform: translateX(2000px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
Адаптируем блоки с текстом
Далее создадим файл под медиа запросы, и подключам его на страницу.
<link rel="stylesheet" href="css/media.css" media="all and (max-width: 900px)">
Для того чтобы корректно работали стили медиа запросов пропишем мета тег viewport.
<meta name="viewport" content="width=device-width, initial-scale=1">
Переходим в файл медиа и опишем в нем стили для блоков с текстом под разные расширения.
.carousel-inner h3 {
font-size: 20px;
padding: 15px;
}
.carousel-inner p {
font-size: 16px;
padding: 10px;
}
@media all and (max-width: 768px) {
.carousel-caption {
bottom: 10%;
}
.carousel-inner h3 {
font-size: 18px;
}
.carousel-inner p {
font-size: 14px;
}
}
@media all and (max-width: 600px) {
.carousel-inner h3 {
display: none;
}
.carousel-inner p {
display: none;
}
}
Затем можно задать автоскрол в 7 сек, и слайдер у нас готов.
<script>
$('.carousel').carousel({
interval: 7000
})
</script>
Понравился пример реализации слайдера на Bootstrap 3, поделись им с друзьями в социальных сетях.
Урок подготовил Горелов Денис.
Оставить комментарий:
Загрузка...
Отзывы
Отзывов нет.
Написать отзыв
Выбирай свою тему, и мы напишем когда выйдет по ней очередное видео.