Bootstrap 5 mousewheel как сделать?

Question

[Александр Зайцев]

Добрый день, уважаемые коллеги!

1. Подскажите пожалуйста, каким образом можно реализовать функционал прокрутки слайдера при помощи колеса мыши в bootstrap 5 Carousel, а в мобильной версии чтобы работал свайп
Пытаюсь подружить с прокруткой этот слайдер

2. Вторая задача, сделать этот слайдер вертикальным.

Добрые люди, подскажите, буду вам благодарен

var myCarousel = document.getElementById('carouselExampleFade')

myCarousel.addEventListener('slide.bs.carousel', function () {
  // Что сюда написать, что бы заработала прокрутка колесом мыши?
})

Answer 1

[Олег]

1. https://learn.javascript.ru/mousewheel - колёсико мыши https://developer.mozilla.org/ru/docs/Web/API/Touc... - свайпы
2. если вы хотели такую штуку без доолгой переделки


То это будет что-то типа такого:

<div class="ratio ratio-1x1">
<div class="bd-example" style="transform:rotate(90deg);position:absolute;display:table;">
<div id="carouselExampleFade" class="carousel slide" data-bs-ride="carousel" style="display:table-cell; vertical-align:middle;position: relative;">
  <div class="carousel-inner">
    <div class="carousel-item">
      <svg class="bd-placeholder-img bd-placeholder-img-lg d-block w-100" width="800" height="400" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: First slide" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#777"></rect><text x="50%" y="50%" fill="#555" dy=".3em">First slide</text></svg>

    </div>
    <div class="carousel-item active">
      <svg class="bd-placeholder-img bd-placeholder-img-lg d-block w-100" width="800" height="400" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: Second slide" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#666"></rect><text x="50%" y="50%" fill="#444" dy=".3em">Second slide</text></svg>

    </div>
    <div class="carousel-item">
      <svg class="bd-placeholder-img bd-placeholder-img-lg d-block w-100" width="800" height="400" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: Third slide" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#555"></rect><text x="50%" y="50%" fill="#333" dy=".3em">Third slide</text></svg>

    </div>
  </div>
  <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleFade" 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="#carouselExampleFade" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </button>
</div>
</div>
</div>

Вот тут нужный класс для эффекта добавляете, тот же "carousel-fade", если он действительно нужен:

<div id="carouselExampleFade" class="carousel slide" ...

Комментарий: здесь кусок кода примера со страницы модифицирован.
- к .bd-example добавил style="transform:rotate(90deg);position:absolute;display:table;" (поворот на 90 град, позиция абсолютная, отображение как таблица)
- .bd-example обернул в контейнер (квадратный контейнер)
- #carouselExampleFade добавил style="display:table-cell; vertical-align:middle;position: relative;" (отображать как ячейку таблицы, вертикальное выравнивание по центру, позиция относительная)

P.S. Чем шире экран - тем шире (а при повороте на 90 град - выше) блок со слайдером. Т.е. слайдер всегда будет занимать по высоте 1 экран просмотра, если дело касается отображения на экране 16:9 16:10

Comments

[Александр Зайцев]

Олег, напишите мне в контакте, хочу поблагодарить вас
https://vk.com/zayac.design