Мастерство использования клавиш навигации с помощью Carousel в Bootstrap

Компонент Carousel в Bootstrap позволяет создавать анимированный слайдер с возможностью пролистывания картинок изображений с помощью мыши или сенсорного устройства. Однако мало кто знает, что этот компонент также предоставляет возможность навигации с помощью клавиатуры. Это особенно полезно для людей с ограниченными возможностями, которым сложно использовать мышь или сенсорный экран.

Чтобы включить навигацию по клавишам в Carousel Bootstrap, необходимо добавить атрибут tabindex к элементу Carousel. Затем нужно добавить обработчики событий для клавиш «влево» и «вправо» и прописать код для переключения слайдов в зависимости от нажатой клавиши.

Для этого достаточно добавить следующий код внутри блока JavaScript:


<script>
  var carousel = document.getElementById('myCarousel');
  carousel.setAttribute('tabindex', '0');

  carousel.addEventListener('keydown', function(event) {
    if (event.key === 'ArrowLeft') {
      $('#myCarousel').carousel('prev');
      event.preventDefault();
    } else if (event.key === 'ArrowRight') {
      $('#myCarousel').carousel('next');
      event.preventDefault();
    }
  });
</script>


В этом коде мы присваиваем атрибут tabindex элементу Carousel и добавляем обработчик событий для нажатия клавиш. Если нажата клавиша «влево», вызывается функция carousel(‘prev’), выполняющая переключение на предыдущий слайд. Аналогично, если нажата клавиша «вправо», вызывается функция carousel(‘next’), переключающая на следующий слайд. При этом мы также отменяем стандартное поведение браузера для этих клавиш, чтобы избежать прокрутки страницы.

Теперь пользователи смогут пользоваться навигацией в Carousel с помощью клавиатуры. Это поможет им более удобно и быстро перемещаться по контенту и визуальному материалу на вашем сайте.

Carousel в Bootstrap

Для создания Carousel в Bootstrap необходимо добавить несколько компонентов: контейнер с классом «container-fluid» для охвата всей ширины экрана, элемент

npm install bootstrap

<link rel="stylesheet" href="./node_modules/bootstrap/dist/css/bootstrap.min.css"><script src="./node_modules/bootstrap/dist/js/bootstrap.min.js"></script>

<link rel="stylesheet" href="путь_к_папке_bootstrap/css/bootstrap.min.css"><script src="путь_к_папке_bootstrap/js/bootstrap.min.js"></script>

<div id="myCarousel" class="carousel slide" data-ride="carousel"><!-- Содержимое слайдшоу --></div>

<div id="carouselExampleControls" class="carousel slide" data-bs-ride="carousel"><div class="carousel-inner"><div class="carousel-item active"><img src="img/slide1.jpg" class="d-block w-100" alt="Слайд 1"></div><div class="carousel-item"><img src="img/slide2.jpg" class="d-block w-100" alt="Слайд 2"></div><div class="carousel-item"><img src="img/slide3.jpg" class="d-block w-100" alt="Слайд 3"></div></div><button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="prev"><span class="carousel-control-prev-icon" aria-hidden="true"></span><span class="visually-hidden">Previous</span></button><button class="carousel-control-next" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="next"><span class="carousel-control-next-icon" aria-hidden="true"></span><span class="visually-hidden">Next</span></button></div>

.carousel {display: flex;flex-direction: row;align-items: center;justify-content: center;}.carousel-image {width: 100%;height: 100%;object-fit: cover;}

<div class="carousel"><img class="carousel-image" src="image1.jpg" alt="Изображение 1"><img class="carousel-image" src="image2.jpg" alt="Изображение 2"><img class="carousel-image" src="image3.jpg" alt="Изображение 3"></div>