Как создать простой слайдер изображений на Bootstrap?

Пользователь

от karen.wisozk , в категории: HTML/CSS , год назад

Как создать простой слайдер изображений на Bootstrap?

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

1 ответ

Пользователь

от kenya , год назад

@karen.wisozk 

Bootstrap - это популярный фреймворк для создания веб-сайтов, который предоставляет множество готовых компонентов, в том числе и слайдеров изображений.


Для создания простого слайдера изображений на Bootstrap можно использовать компонент Carousel. Ниже приведен пример кода для создания слайдера из двух изображений:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<div id="myCarousel" class="carousel slide" 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>
  </ol>

  <!-- Слайды -->
  <div class="carousel-inner">
    <div class="item active">
      <img src="img1.jpg" alt="Изображение 1">
    </div>

    <div class="item">
      <img src="img2.jpg" alt="Изображение 2">
    </div>
  </div>

  <!-- Стрелки для переключения слайдов -->
  <a class="left carousel-control" href="#myCarousel" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left"></span>
    <span class="sr-only">Предыдущий</span>
  </a>
  <a class="right carousel-control" href="#myCarousel" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right"></span>
    <span class="sr-only">Следующий</span>
  </a>
</div>


Обратите внимание на следующие элементы кода:

  • div с id="myCarousel" - это контейнер для компонента Carousel.
  • ol с классом carousel-indicators - это индикаторы слайдов. Каждый индикатор связан с соответствующим слайдом.
  • div с классом carousel-inner - это контейнер для слайдов.
  • div с классом item - это слайд. Первый слайд должен иметь класс active.
  • a с классами left carousel-control и right carousel-control - это стрелки для переключения слайдов.


Для добавления дополнительных слайдов необходимо добавить новый элемент div с классом item и указать путь к изображению внутри него.


Для более подробной информации о компоненте Carousel и других компонентах Bootstrap вы можете посетить официальный сайт: https://getbootstrap.com/docs/4.0/components/carousel/