• Гость
For-Web
  • Главная
  • Вебмастеру
    • Блог
    • SQL
    • PHP
    • JavaScript
    • CSS
    • HTML
    • Литература
  • Скрипты, Soft, APP
    • Bitcoin
    • Соц сети
    • Реклама, Буксы
    • Интернет магагзин
    • Браузерные игры
    • Скрипты хостинга
    • Мобильные приложения
    • Программы
  • Data Life Eingine
    • Модули
    • Хаки
    • DLE шаблоны
  • Bootstrap
    • Шаблоны
    • Плагины
    • Сниппеты
    • Пособие Bootstrap
  • Дизайн и Графика
    • PSD макеты
    • Mocups Free
    • Иконки, Кнопки
    • Шрифты,Текст
    • Текстуры, Фон
    • Анимация
    • Формы
    • Палитра
    • Галерея
    • Раскладка
    • Модальное окно
    • Элементы загрузки
    • Меню и навигация
    • Таблицы
    • Украшения для сайта
    • Фотошоп
  • Шаблоны сайтов
    • WAP шаблоны
    • HTML 5 шаблоны
    • Админка
    • Автомобили
    • Аниме
    • Блоги
    • Бизнес и Финансы
    • Игровые
    • Женские
    • Заглушки
    • Кинопорталы
    • Кулинарные
    • Лендинг
    • Мобильные
    • Музыкальные
    • Новостные
    • ПО, IT
    • Портфолио
    • Природа
    • Строительство
    • Спорт
    • Хостинг
    • Адалт
    • Страницы 404
  • Инфо
    • О проекте
    • Обратная связь
    • Статистика
    • Privacy Policy
главная » Учебник Bootstrap » Руководство Bootstrap Carousel

Руководство Bootstrap Carousel


1- Bootstrap Carousel

Carousel (Карусель) похожа на слайдшоу (slidershow), он отображает цикл определенного содержания, например фото, текст,... Carousel у Bootstrap была построена на основании  CSS и немного  jаvascript.Ниже показано изображение иллюстрирующее  Carousel, оно отображает цикл некоторых фото.
Карусель имеет следующую структруру:


Самая простая  Carousel включает только  Item (Slider) и содержание каждого  Slider это фото. Она не включает управления (Controls), и не имеет  Indicators.
<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8">
      <title>Bootstrap Carousel</title>
      <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
   </head>
   <body>
      <div class="container">
         <h4 class="mb-3">Simple Carousel</h4>
         <div id="myCarousel" class="carousel slide border" data-ride="carousel">
            <div class="carousel-inner">
               <div class="carousel-item active">
                  <img class="d-block w-100" src="../images/carousel-img-1.jpg" alt="Panther">
               </div>
               <div class="carousel-item">
                  <img class="d-block w-100" src="../images/carousel-img-2.jpg" alt="Black Cat">
               </div>
               <div class="carousel-item">
                  <img class="d-block w-100" src="../images/carousel-img-3.jpg" alt="Lion">
               </div>
            </div>
         </div>
      </div>
      <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
      <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
   </body>
</html>


2- Carousel с Controls

Обычная  Carousel имеет кнопки  "Next" и "Previous" позволяющие пользователю перейти к следующему  Slider или назад к предыдущему  Slider. Они называются управлением (Controls). 
<div id="myCarousel" class="carousel slide border" data-ride="carousel">
   <div class="carousel-inner">
      <div class="carousel-item active">
         <img class="d-block w-100" src="../images/carousel-img-1.jpg" alt="Leopard">
      </div>
      <div class="carousel-item">
         <img class="d-block w-100" src="../images/carousel-img-2.jpg" alt="Cat">
      </div>
      <div class="carousel-item">
         <img class="d-block w-100" src="../images/carousel-img-3.jpg" alt="Lion">
      </div>
   </div>
   <!-- Controls -->
   <a class="carousel-control-prev" href="#myCarousel" role="button" data-slide="prev">
     <span class="carousel-control-prev-icon" aria-hidden="true"></span>
     <span class="sr-only">Previous</span>
   </a>
   <a class="carousel-control-next" href="#myCarousel" role="button" data-slide="next">
     <span class="carousel-control-next-icon" aria-hidden="true"></span>
     <span class="sr-only">Next</span>
   </a>
</div>


Пример кастомизации  Controls:
.carousel-control-prev-icon {
     background-image: url(../images/previous-32.png);
     width: 32px;
     height: 32px;
}
 .carousel-control-next-icon {
     background-image: url(../images/next-32.png);
     width: 32px;
     height: 32px;
}


3- Carousel с Indicators

Indicators похожи на  Shortcut, которые помогают пользователю перейти к определенному  Item (Slider) в списке  Item у Carousel. Примечание:  Item в Carousel индексированы (index) начиная с 0 (0, 1, 2,..)
<div id="myCarousel" class="carousel slide border" data-ride="carousel">
   <!-- Indicators -->
   <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="carousel-item active">
         <img class="d-block w-100" src="../images/carousel-img-1.jpg" alt="Leopard">
      </div>
      <div class="carousel-item">
         <img class="d-block w-100" src="../images/carousel-img-2.jpg" alt="Cat">
      </div>
      <div class="carousel-item">
         <img class="d-block w-100" src="../images/carousel-img-3.jpg" alt="Lion">
      </div>
   </div>
   <!-- Controls -->
   <a class="carousel-control-prev" href="#myCarousel" role="button" data-slide="prev">
     <span class="carousel-control-prev-icon" aria-hidden="true"></span>
     <span class="sr-only">Previous</span>
   </a>
   <a class="carousel-control-next" href="#myCarousel" role="button" data-slide="next">
     <span class="carousel-control-next-icon" aria-hidden="true"></span>
     <span class="sr-only">Next</span>
   </a>
</div>


Ниже показаны некоторые примеры кастомизации Indicators.

Custom Indicators (1)


.carousel-indicators li {
  width: 20px;
  height: 20px;
  border-radius: 100%;
}

Custom Indicators (2)


Стили:
.carousel-indicators li {
     text-indent: 0px;
     text-align: center;
     color: red;
     margin: 0 2px;
     width: 30px;
     height: 30px;
     border: none;
     border-radius: 100%;
     line-height: 30px;
     background-color: #999;
     transition: all 0.25s ease;
}
 .carousel-indicators .active, .hover {
     margin: 0 2px;
     width: 30px;
     height: 30px;
     background-color: #337ab7;
}
сам код:
<div id="myCarousel" class="carousel slide border" data-ride="carousel">
   <ol class="carousel-indicators">
      <li data-target="#myCarousel" data-slide-to="0" class="active">1</li>
      <li data-target="#myCarousel" data-slide-to="1">2</li>
      <li data-target="#myCarousel" data-slide-to="2">3</li>
   </ol>
   <div class="carousel-inner">
      <div class="carousel-item active">
         <img class="d-block w-100" src="../images/carousel-img-1.jpg" alt="Panther">
      </div>
      <div class="carousel-item">
         <img class="d-block w-100" src="../images/carousel-img-2.jpg" alt="Black Cat">
      </div>
      <div class="carousel-item">
         <img class="d-block w-100" src="../images/carousel-img-3.jpg" alt="Lion">
      </div>
   </div>
   <a class="carousel-control-prev" href="#myCarousel" role="button" data-slide="prev">
   <span class="carousel-control-prev-icon" aria-hidden="true"></span>
   <span class="sr-only">Previous</span>
   </a>
   <a class="carousel-control-next" href="#myCarousel" role="button" data-slide="next">
   <span class="carousel-control-next-icon" aria-hidden="true"></span>
   <span class="sr-only">Next</span>
   </a>
</div>


Custom Indicators (3)

.carousel-indicators {
     position: absolute;
     bottom: 0;
     margin: 0;
     left: 0;
     right: 0;
     width: auto;
}
.carousel-indicators li, .carousel-indicators li.active {
     float: left;
     width: 33%;
     height: 10px;
     margin: 0;
     border-radius: 0;
     border: 0;
     background: #ccc;
}
.carousel-indicators li.active {
     background: orange;
}


4- Carousel с титром (Caption)

Для каждого  Slider вы можете добавить к нему титры (Caption). Это легко выполнимо, обернув содержание вашего титра в тег <div class="carousel-caption">.
<div id="myCarousel" class="carousel slide border" data-ride="carousel">
   <div class="carousel-inner">
      <div class="carousel-item active">
         <img class="d-block w-100" src="../images/carousel-img-1.jpg" alt="Leopard">
         <div class="carousel-caption">
            <h5>Leopard</h5>
            <small>
            A black Panther is the melanistic color variant of any big cat species.
            Black Panthers in Asia and Africa are leopards (Panthera pardus).
            </small>
         </div>
      </div>
      <div class="carousel-item">
         <img class="d-block w-100" src="../images/carousel-img-2.jpg" alt="Cat">
         <div class="carousel-caption">
            <h5>Black Cat</h5>
            <small>
            A black cat is a domestic cat with black fur that may be a mixed or specific breed
            </small>
         </div>
      </div>
      <div class="carousel-item">
         <img class="d-block w-100" src="../images/carousel-img-3.jpg" alt="Lion">
         <div class="carousel-caption">
            <h5>Lion</h5>
            <small>
            The lion (Panthera leo) is a species in the cat family (Felidae).
            A muscular, deep-chested cat, it has a short, rounded head, a reduced neck and round ears
            </small>
         </div>
      </div>
   </div>
   <a class="carousel-control-prev" href="#myCarousel" role="button" data-slide="prev">
   <span class="carousel-control-prev-icon" aria-hidden="true"></span>
   <span class="sr-only">Previous</span>
   </a>
   <a class="carousel-control-next" href="#myCarousel" role="button" data-slide="next">
   <span class="carousel-control-next-icon" aria-hidden="true"></span>
   <span class="sr-only">Next</span>
   </a>
</div>


Описание может отображаться на устройствах с широким экраном, для устройств с слишком маленьким экраном вы можете его скрыть. Это можно выполнить в помощью класса  .d-(sm|md|lg|xl)-block, .d-none.

Класс
Описание
.d-sm-block .d-none
Caption отобразится если ширина Carousel >= 567px. Если наоборот, то будет скрыто
.d-md-block .d-none
Caption отобразится если ширина Carousel >= 768px. Если наоборот, то будет скрыто
.d-lg-block .d-none
Caption отобразится если ширина Carousel >= 992px. Если наоборот, то будет скрыто
.d-xl-block .d-none
Caption отобразится если ширина Carousel >= 1200px. Если наоборот, то будет скрыто

Пример кода:
<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8">
      <title>Bootstrap Carousel</title>
      <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
   </head>
   <body>
      <div class="container-fluid">
         <h4 class="mb-3">Responsive Carousel with Caption</h4>
         <p>.carousel-caption .d-none .d-sm-block</p>
         <div id="myCarousel" class="carousel slide border" data-ride="carousel">
            <div class="carousel-inner">
               <div class="carousel-item active">
                  <img class="d-block w-100" src="../images/carousel-img-1.jpg" alt="Leopard">
                  <div class="carousel-caption d-none d-sm-block">
                     <h5>Leopard</h5>
                     <small>
                     A black Panther is the melanistic color variant of any big cat species.
                     Black Panthers in Asia and Africa are leopards (Panthera pardus).
                     </small>
                  </div>
               </div>
               <div class="carousel-item">
                  <img class="d-block w-100" src="../images/carousel-img-2.jpg" alt="Cat">
                  <div class="carousel-caption d-none d-sm-block">
                     <h5>Black Cat</h5>
                     <small>
                     A black cat is a domestic cat with black fur that may be a mixed or specific breed
                     </small>
                  </div>
               </div>
               <div class="carousel-item">
                  <img class="d-block w-100" src="../images/carousel-img-3.jpg" alt="Lion">
                  <div class="carousel-caption d-none d-sm-block">
                     <h5>Lion</h5>
                     <small>
                     The lion (Panthera leo) is a species in the cat family (Felidae).
                     A muscular, deep-chested cat, it has a short, rounded head,
                     a reduced neck and round ears
                     </small>
                  </div>
               </div>
            </div>
            <a class="carousel-control-prev" href="#myCarousel" role="button" data-slide="prev">
            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
            </a>
            <a class="carousel-control-next" href="#myCarousel" role="button" data-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
            </a>
         </div>
      </div>
      <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
      <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
   </body>
</html>


5- Эффект (Effect)

Добавьте класс  .carousel-fade для  Carousel, и вы увидите эффект  fade (затухание) когда  Carousel сменяется с одного  Slider на другой  Slider.
<div id="myCarousel" class="carousel carousel-fade slide border" data-ride="carousel">
   <div class="carousel-inner">
      <div class="carousel-item active">
         <img class="d-block w-100" src="../images/carousel-img-1.jpg" alt="Leopard">
      </div>
      <div class="carousel-item">
         <img class="d-block w-100" src="../images/carousel-img-2.jpg" alt="Cat">
      </div>
      <div class="carousel-item">
         <img class="d-block w-100" src="../images/carousel-img-3.jpg" alt="Lion">
      </div>
   </div>
   <!-- Controls -->
   <a class="carousel-control-prev" href="#myCarousel" role="button" data-slide="prev">
   <span class="carousel-control-prev-icon" aria-hidden="true"></span>
   <span class="sr-only">Previous</span>
   </a>
   <a class="carousel-control-next" href="#myCarousel" role="button" data-slide="next">
   <span class="carousel-control-next-icon" aria-hidden="true"></span>
   <span class="sr-only">Next</span>
   </a>
</div>


6 - Инициализация карусели с помощью jаvascript

Карусель можно активировать с помощью кода jаvascript:
$('.carousel').carousel();
Вместо '.carousel' укажите необходимый селектор для выбора одной или множества каруселей, которые нужно активировать.


Настройка карусели

Настройка карусели осуществляется с помощью параметров. Параметры можно устанавливать как с помощью data-атрибутов, так и посредством jаvascript.
При использовании data-атрибутов, добавьте к имени параметра приставку data-. Например, для установки параметра interval необходимо использовать атрибут с именем data-interval.

ИмяОписание
intervalЗначение по умолчанию (миллисекунд): 5000, т.е. 5 секунд. Параметр interval устанавливает количество времени в миллисекундах (паузу) между автоматической сменой слайдов карусели. Если данному параметру указать значение false, то карусель не будет выполнять автоматическую смену слайдов.
keyboardЗначение по умолчанию: true. Данный параметр определяет должна ли карусель реагировать на события клавиатуры.
pauseЗначение по умолчанию: "hover". Если параметр pause имеет значение "hover", то смена слайдов, при нахождении курсора над ней, не будет выполняться. А при покидании курсора смена слайдов будет опять возобновляться.
Если параметру pause установить значение false, то нахождение курсора над каруселью не будет останавливать автоматическую смену слайдов.
На устройствах с сенсорным экраном, при значении "hover", пауза будет устанавливаться на касание. Но после касания, карусель начнёт сменять слайды только после времени, равное 2 интервалам (по умолчанию, равное 10 секундам).
rideЗначение по умолчанию: false. При значении false, запуск автоматической смены слайдов произойдёт только после того, как пользователь вручную (с помощью элементов управления или индикаторов) перейдёт к другому слайду. Если в качестве этого параметра установить значение "carousel", то смена слайдов запустится автоматически сразу после загрузки страницы.
wrapЗначение по умолчанию: true. Данный параметр определяет должна ли смена слайдов зацикливаться. Т.е. после последнего слайда осуществляться переход к первому при движении next и после первого к последнему при движении prev. Если это не нужно, то значение параметра wrap необходимо установить равное false.


Методы плагина Carousel

ИмяОписание
.carousel(options)Инициализирует один или множество выбранных элементов в качестве карусели с указанными параметрами.
.carousel('cycle')Запускает процесс автоматической смены слайдов (слева направо).
.carousel('pause')Отменяет процесс автоматической смены слайдов.
.carousel(number)Выполняет переход на указанный слайд карусели. Отсчёт слайдов ведётся с 0. Поэтому, например, чтобы перейти на второй слайд, методу carousel необходимо передать число 1.
.carousel('prev')Выполняет переход на предыдущий слайд.
.carousel('next')Выполняет переход на следующий слайд.

Пример инициализации карусели с параметрами:
<div id="carousel" class="carousel slide">
  ...
</div>
...
<script>
$(function () {
  $('#carousel').carousel({
    interval: 10000,
    keyboard: false,
    pause: 'hover',
    ride: 'carousel',
    wrap: false
  });
});
</script>


Пример использование методов для управления каруселью:

<div id="carousel" class="carousel slide">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img class="img-fluid" src="..." alt="...">
    </div>
    <div class="carousel-item">
      <img class="img-fluid" src="..." alt="...">
    </div>
    <div class="carousel-item">
      <img class="img-fluid" src="..." alt="...">
    </div>
  </div>
</div>

<div class="my-2">
  <button class="btn btn-primary" data-action="cycle">Запустить</button>
  <button class="btn btn-primary" data-action="pause">Остановить</button>
  <button class="btn btn-primary" data-action="prev">Предыдущий</button>
  <button class="btn btn-primary" data-action="next">Следующий</button>
  <button class="btn btn-primary" data-action="to-1">На 1 слайд</button>
  <button class="btn btn-primary" data-action="to-2">На 2 слайд</button>
  <button class="btn btn-primary" data-action="to-3">На 3 слайд</button>
</div>

...

<script>
$(function () {
  // метод cycle
  $('.btn').click(function () {
    var action = $(this).attr('data-action');
    if (action.indexOf('to') >= 0) {
      var action = parseInt(action.substring(3))-1;
    }
    $('#carousel').carousel(action);
  });
});
</script>


События плагина Carousel

JS Bootstrap генерирует для карусели два события.
ИмяОписание
slide.bs.carouselСобытие возникает перед началом смены слайда.
slid.bs.carouselСобытие возникает после завершения смены слайда.

Оба эти события имеют следующие дополнительные свойства:
  • direction - направление слайдинга ("left" или "right");
  • relatedTarget - DOM-элемент, который перемещается на место текущего;
  • from - индекс текущего элемента;
  • to - индекс следующего элемента.
Свойства from и to имеются только в Bootstrap 4.

Пример работы с событиями:
<!-- Bootstrap 4 -->
<div class="container">
  <div class="row">
    <div class="col-6">
      <div id="carousel" class="carousel slide" data-ride="carousel">
        ...
      </div>
      <ul class="info text-left"></ul>
    </div>
    <div class="col-6">
      <ul class="log text-left" style="height: 200px; overflow-y: auto;"></ul>
    </div>
  </div>
</div>
...
<script>
  $(function () {
    var t = function () {
      var now = new Date();
      var m = now.getMinutes();
      var s = now.getSeconds();
      if (m < 10) m = '0' + m;
      if (s < 10) s = '0' + s;
      return m + ':' + s;
    };
    $('#carousel').on('slide.bs.carousel', function (e) {
      $('.log').prepend('<li>' + t() + ' - slide.bs.carousel</li>');
      var info = '<li><b>direction</b> = ' + e.direction + '</li>';
      info += '<li><b>DOM-элемент</b> = ' + $(e.relatedTarget).attr('id') + '</li>';
      info += '<li><b>from</b> = ' + e.from + '</li>';
      info += '<li><b>to</b> = ' + e.to + '</li>';
      $('.info').html(info);
    });
    $('#carousel').on('slid.bs.carousel', function (e) {
      $('.log').prepend('<li>' + t() + ' - slid.bs.carousel</li>');
    });
  });
</script>


Изменение длительности перехода (Bootstrap 4)

Длительность перехода элементов .carousel-item может быть изменена с помощью Sass переменной $carousel-transition перед компиляцией или пользовательскими стилями, если используете уже скомпилированный CSS. Если применяете несколько переходов, то выполните сначала transition transform (например: transform 2.5s ease, opacity .75s ease-out).

Примеры

1. Карусель с автоматической нумерацией слайдов:
<style>
.carousel-number {
  position: absolute;
  top: 0;
  right: 0;
  width: 40px;
  height: 40px;
  background-color: rgba(255, 255, 255, .8);
  line-height: 40px;
  font-size: 20px;
}
</style>
...
<script>
$('.carousel').find('.carousel-item').each(function (index, item) {
  var carouselItem = $(item).find('.carousel-number');
  if (carouselItem.length > 0) {
    carouselItem.text(index + 1);
    return;
  }
  var element = $('<div></div>');
  element
    .addClass('carousel-number')
    .text(index + 1);
  $(item).append(element);
});
</script>

Ссылка для скачивания доступна только авторизованным пользователям, пожалуйста пройдите регистрацию. Это займёт не более минуты. Не волнуйтесь, мы не спамим!


Руководство Bootstrap Carousel

Вы находитесь на странице скачивания файла. Все скрипты храняться на яндекс диске. Кнопки скачивания файла  находятся внизу страницы. Если нет кнопки  , то значит нет файла. Нет файла - просьба сообщить администратору  любым удобным способом. Спасибо большое за понимание!

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

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




  • Комментарии
  • О статье
  • Похожие новости
У данной публикации нет комментариев.

admin

Автор

1-08-2020, 14:36

Дата

Учебник Bootstrap

Категория
  • Комментариев: 0
  • Просмотров: 1 001
Учебник Bootstrap
Система сеток Bootstrap 4
Учебник Bootstrap
Руководство Bootstrap Card
Учебник Bootstrap
Руководство Bootstrap NavBar
Учебник Bootstrap
Руководство Bootstrap Scrollspy
Учебник Bootstrap
Bootstrap Nav, Tab, Pill
Украшения для сайта
Новогодние украшения от яндекса
Информация

Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.

Комментарии
На DLE 15.2 выводит тегом как есть {short-story-text} да и судя по коду плагина и не должен))
27 июля 2022 22:12

Karat7

Rocky, Странно )) Сейчас пере залью, а пока вот код <?php if (!defined('DATALIFEENGINE')) { die("Hacking
21 июля 2022 20:30

admin

admin, ну этого файла нет File engine/modules/iChat/show.php в Шаблоне 14.2
21 июля 2022 15:48

Rocky

Rocky, В комплектации с шаблоном все есть , устанавливаете правильно пожалуйста. Возможно ошиблись. Кнопочки в стилях
21 июля 2022 14:41

admin

где взять этот файл File engine/modules/iChat/show.php not found. движок 14.2, можете скинуть и как исправить это
21 июля 2022 11:21

Rocky


Какие языки программирования Вы знаете


  • For-WEb.Ru 2018 - 2022  

Авторизация


Регистрация Забыл пароль