Несколько слайд-шоу Bootstrap Carousel

Опубликовано: 2016-03-17

Как добавить несколько слайд-шоу Bootstrap Carousel Slideshow на одну страницу или одну страницу?

В этом руководстве мы предоставляем образец рабочего исходного кода. Сначала загрузите пример кода, нажав кнопку «Загрузить код» внизу страницы.

Добавление и создание нескольких слайдеров-каруселей начальной загрузки на странице очень легко и просто.

Итак, начнем с примера кода.

После завершения загрузки исходного кода вы получите zip-файл «multiple-bootstrap-carousels.zip». Извлеките zip-файл в любое место локальной компьютерной системы.

После извлечения вы найдете каталог с именем «multiple-bootstrap-carousels», в этом каталоге вы получите следующие активы:

  1. Каталог CSS
  2. Каталог шрифтов
  3. Каталог изображений
  4. JS-каталог
  5. Каталог CSS
  6. HTML-файл — multi-bootstrap-carousels.html

Что это за свидетельства?

Эти активы необходимы для создания начальной загрузки нескольких ползунков-каруселей.

  • Каталог CSS содержит файл «bootstrap.min.css», который используется для разработки адаптивных HTML-страниц.
  • Каталог Fonts используется начальной загрузкой CSS для создания различных встроенных графических значков. Управление навигацией со стрелкой карусели также генерируется этим. Вы можете проверить здесь.
  • Каталог изображений содержит все изображения, которые мы будем использовать в слайдах карусели.
  • Каталог JS содержит 2 файла js «jquery.min.js» и «bootstrap.min.js». файл jquery.min.js — это библиотека JavaScript, предназначенная для использования jquery JavaScript на веб-сайтах. файл bootstrap.min.js — это файл библиотеки bootstrap framework js, который используется для создания каруселей начальной загрузки, форм моделей, всплывающих подсказок, вкладок и т. д. файл bootstrap.min.js зависит от файла jquery.min.js, вам нужно загрузить сначала перед использованием bootstrap js. Вы можете больше узнать о файле библиотеки bootstrap js здесь.
  • Файл HTML (multiple-bootstrap-carousels.html) содержит всю часть дизайна и кода нескольких слайдеров-каруселей.

давайте узнаем больше о файле multi-bootstrap-carousels.html.

Вы должны открыть файл HTML в любом редакторе кода. Если у вас на компьютере не установлен инструмент редактора кода, то вот некоторые платные инструменты редактора кода, загрузите и установите любой инструмент редактора кода:

Блокнот Плюс +
Скачать ЭдитПлюс +

В разделе Head мы загрузили все необходимые файлы CSS и js и четыре JS-кода карусели, как показано ниже:

Код

 <голова>
 <title>Пример слайд-шоу с несколькими каруселями Bootstrap</title>
 <мета-кодировка="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 
 <!-- загрузочная библиотека css -->
 <link rel="stylesheet" href="css/bootstrap.min.css">
 
 <!-- Последняя библиотека jQuery (сначала загрузите эту библиотеку) -->
 <script src="js/jquery.min.js"></script>
 
 <!-- загрузочная библиотека js -->
 <script src="js/bootstrap.min.js"></script>
 
 <!-- карусель, настраивающий код css -->
 <стиль>
 .карусель {
 /* здесь вы можете добавить настройку css, например, высоту и ширину слайдера */
 }
 </стиль>
 
 <!-- js-код карусели -->
 <скрипт>

 /* первое слайд-шоу карусели */
 $('#карусель-1').карусель({
      // Количество времени задержки между циклами слайдов. Если false, цикла нет
      интервал: 500,

      // Приостанавливает слайд при входе мыши и возобновляет при выходе из мыши.
      пауза: «зависание»,

      // Должна ли карусель вращаться непрерывно или иметь жесткие остановки.
      обернуть: правда,

      // Должна ли карусель реагировать на события клавиатуры.
      клавиатура: правда
 });
 
 
 /* второе слайд-шоу карусели */
 $('#карусель-2').карусель({
      интервал: 1000,
      обернуть: правда,
      клавиатура: правда
 });
 
 
 /* третье слайд-шоу карусели */
 $('#карусель-3').карусель({
     интервал: 2000,
     обернуть: правда,
     клавиатура: правда
 });
 
 
 /* четвертое слайд-шоу карусели */
 $('#карусель-4').карусель({
     интервал: 3000,
     обернуть: правда,
     клавиатура: правда
 });
 </скрипт>
 </голова>

В разделе Body мы определяем HTML-код двух каруселей. Теперь объясним работу первого кода ползунка. Мы разделили div класса строк на два столбца, используя класс col-md-6. И в первый столбец мы добавили HTML-код первого слайдера-карусели, как показано ниже.

 <дел класс = "строка">
 <!-------------- начало первого столбца -------------->
 <div class="col-md-6">
  <div class="джамботрон">
   <center><h3>Карусель 1</h3></center>
   <!-------------- запуск первого карусельного слайд-шоу -------------->
   <div class="карусель слайд" data-ride="карусель">
   <!-- слайды маркеров -->
   <ol class="carousel-indicators">
    <li data-target="#carousel-1" data-slide-to="0" class="active"></li>
    <li data-target="#carousel-1" data-slide-to="1"></li>
    <li data-target="#carousel-1" data-slide-to="2"></li>
   </ol>

   <!-- оболочка для слайдов -->
   <div class="carousel-inner" role="listbox">
    
    <!-- слайды 1 -->
    <div class="элемент активен">
     <img src="images/girl-1.jpg" alt="Хания">
    </div>
 
    <!-- слайды 2 -->
    <div класс="элемент">
     <img src="images/girl-2.jpg" alt="Хания">
    </div>
 
    <!-- слайды 3 -->
    <div класс="элемент">
     <img src="images/girl-3.jpg" alt="Цветок">
    </div>

   </div>

   <!-- стрелки управления слайдами влево и вправо -->
   <a class="left carousel-control" href="#carousel-1" role="button" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
    <span class="sr-only">Предыдущий</span>
   </a>
   <a class="right carousel-control" href="#carousel-1" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
    <span class="sr-only">Далее</span>
   </a>
  </div>
  <!-------------- конец слайд-шоу карусели -------------->
  </div>
 </div>
 <!-------------- конец первого столбца -------------->
</строка>

В приведенном выше HTML-коде есть три части слайдера-карусели.

  • Слайдер Пули
  • Слайды изображений
  • Слайдер навигации

Секция Slider Bullets построена с использованием HTML-тега списка заказов. <ol> использует класс с именем carousel-indicators , который определен в CSS-файле начальной загрузки. И каждый тег <li> имеет атрибут data-target=”#carousel-1″, где #carousel-1 — это тот же идентификатор, который мы используем в первом js-коде карусели в примере кода.

В разделе Slider Image Slides есть div с элементом класса. В каждый из этих div мы добавили тег изображения для загрузки изображения слайда.

Slider Navigation используется для перемещения по слайдам изображений влево или вправо. Стрелки навигации создаются загрузочными графическими значками, называемыми Glyphicon . Кнопки навигации заключены в тег привязки <a> с функцией атрибута данных bootstrap carousel и с классом управления каруселью . В тег <a> в атрибуте href мы добавили тот же идентификатор ( #carousel-1 ), который мы добавили ранее в часть маркеров слайдера. Этот идентификатор используется в первом js-коде слайд-шоу карусели для активации функций первого слайдера в HTML-коде первого слайдера.

В наш второй код слайдера мы присвоили другой идентификатор #carousel-2 для всех трех частей кода слайдера, таких как код js второго слайдера, маркеры второго слайдера и HTML-код навигации.

Скачать пример кода

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

Ребята, если у вас есть предложения относительно языка учебника и загружаемого примера кода, пожалуйста, напишите нам на нашу почту. Наш адрес электронной почты: awordpresslife{at}gmail{dot}com.

Спасибо за чтение, использование и поддержку этого руководства.

Ниже вы найдете ссылки на полезные ссылки, которые мы искали, чтобы написать для вас это руководство:

Получить Bootstrap
jQuery
W3Школы