Как сделать и (и можно ли) вертикальный слайдер в bootstrap-4?

Вертикальный слайдер - это слайдер, который перемещается в вертикальном направлении, вместо традиционного горизонтального слайдера. Начиная с версии Bootstrap 4, фреймворк не предлагает встроенных инструментов для создания вертикальных слайдеров. Однако вы можете достичь этого, добавив некоторые пользовательские стили и JavaScript.

Сначала создайте базовую разметку слайдера. Для этого вы можете использовать компоненты Carousel из Bootstrap 4. Создайте обычный слайдер с имеющимися классами .carousel, .carousel-inner и .carousel-item. Вместо вертикального направления он будет работать в горизонтальном.

Затем вам нужно включить пользовательские стили, чтобы изменить направление слайдера на вертикальное. Добавьте следующий код CSS для создания вертикального слайдера:

.carousel.vertical .carousel-inner {
  height: 100%;
}

.carousel.vertical .carousel-inner>.carousel-item {
  display: block;
  -webkit-transition: -webkit-transform .6s ease-in-out;
  transition: -webkit-transform .6s ease-in-out;
  transition: transform .6s ease-in-out;
  transition: transform .6s ease-in-out, -webkit-transform .6s ease-in-out;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-perspective: 1000px;
  perspective: 1000px;
}

.carousel.vertical .carousel-inner>.carousel-item.active,
.carousel.vertical .carousel-inner>.carousel-item-next,
.carousel.vertical .carousel-inner>.carousel-item-prev {
  display: block;
}

.carousel.vertical .carousel-inner>.carousel-item-next:not(.carousel-item-left),
.carousel.vertical .carousel-inner>.carousel-item-prev:not(.carousel-item-right),
.carousel.vertical .carousel-inner>.carousel-item.active:not(.carousel-item-right):not(.carousel-item-left) {
  -webkit-transform: translateX(0);
  transform: translateX(0);
}

.carousel.vertical .carousel-inner>.carousel-item-next,
.carousel.vertical .carousel-inner>.carousel-item.active.carousel-item-right {
  -webkit-transform: translateY(0);
  transform: translateY(0);
}

.carousel.vertical .carousel-inner>.carousel-item-prev,
.carousel.vertical .carousel-inner>.carousel-item.active.carousel-item-left {
  -webkit-transform: translateY(0);
  transform: translateY(0);
}

После применения пользовательских стилей ваш слайдер будет вертикальным. Однако он пока не будет работать как вертикальный слайдер, поскольку Bootstrap 4 не включает функционал для перемещения слайдов вертикально.

Далее вам понадобится JavaScript для активации вертикального перемещения слайдов. Добавьте следующий код JavaScript:

$('.carousel.vertical .carousel-item').each(function(){
  var next = $(this).next();
  if (!next.length) {
    next = $(this).siblings(":first");
  }
  next.children(":first-child").clone().appendTo($(this));

  for (var i=1;i<2;i++) {
    next=next.next();
    if (!next.length) {
        next = $(this).siblings(":first");
    }
        
    next.children(":first-child").clone().appendTo($(this));
  }
});

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

Теперь ваш вертикальный слайдер должен работать правильно. Вы можете управлять им с помощью стандартных методов Bootstrap 4 для слайдера.

Не забудьте включить необходимые файлы Bootstrap 4 (CSS и JavaScript) и добавить правильные классы для элементов слайдера.

Надеюсь, эта информация окажется вам полезной при создании вертикального слайдера с использованием Bootstrap 4. Если у вас возникнут дополнительные вопросы или затруднения, не стесняйтесь задавать их.