Bootstrap 5 mousewheel how to do?

Question

Slider

Good afternoon, dear colleagues!

1. Please tell me how you can implement the functionality of scrolling the slider using the mouse wheel in bootstrap 5 Carousel, and in the mobile version so that the swipe works.
I'm trying to make this slider friends with scrolling

2. The second task is to make this slider vertical.

Good people, tell me, I will be grateful to you

var myCarousel = document.getElementById('carouselExampleFade')

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

Answer 1

1. https://learn.javascript.ru/mousewheel - mouse wheel https://developer.mozilla.org/ru/docs/Web/API/Touc... - swipes
2. if you wanted such a thing without a long rework That would be something like this:

<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>

Here you add the desired class for the effect, the same "carousel-fade" if you really need it:

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

Comment: here is a piece of the example code from the page modified.
- added style="transform:rotate(90deg);position:absolute;display:table;" to .bd-example (rotate 90 degrees, position absolute, display as table)
- .bd-example wrapped in container (square container)
- #carouselExampleFade added style="display:table-cell; vertical-align:middle;position: relative;" (display as a table cell, vertical center alignment, relative position)
PS The wider the screen - the wider (and when rotated 90 degrees - higher) the block with the slider. Those. the slider will always take up 1 view screen in height when it comes to displaying on a 16:9 16:10 screen