ПОДПИСКА на УРОКИ


Дополнительное видео

JavaScript - #1 Введение / Уроки для начинающих по JS

 МОБИЛЬНАЯ ВЕРСИЯ горизонтального меню | Адаптируем меню на чистом CSS

Media queries CSS как АДАПТИРОВАТЬ сайт


Хостинг от Макхост

Адаптивный СЛАЙДЕР на Bootstrap 3


  • Денис Горелов
  • 27.09.2017
  • Bootstrap
  • Просмотров: 667

В данном уроке разберем, как реализовать такого рода слайд-шоу циклической смены элементов с возможностью адаптации под разные расширения экранов.

Слайдер с помощью 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, поделись им с друзьями в социальных сетях.

Урок подготовил Горелов Денис.

Оставить комментарий:

Отзывы

Отзывов нет.

Написать отзыв

* - Обязательные поля

Выбирай свою тему, и мы напишем когда выйдет по ней очередное видео.