How to implement news through a vertical slider?

Question

css

How to implement such a news carousel? On Bootstrap.
1) From the beginning, one slide contains three slides. (full-screen version)
2) One slide and three slides (blocks) in it are arranged vertically (tablet version)
3) Each 1 block = a separate slide - a classic slider (mobile version)
How to correctly implement paragraph No. 2?

(full version)

(tablet version - how to achieve such a display)

(mobile version)
Implemented as follows:
Tried through the Bootstrap slider. displays one slide at a time --> it is not possible to display all three blocks at once.
I tried through the owlCarousel plugin --> through js I set up the plugin, as a result, paragraph 1 and paragraph 3 are fully implemented.
p. 2 --> changed the properties animateOut : "slideOutUp"
animateIn : "slideInUp" - only the direction of the animation has naturally changed, it works separately with each slide, but does not work when three slides are combined into one.

$(document).ready(function() {
    $("#news-slider").owlCarousel({
        items : 3,
        itemsDesktop : [1200,3],
        itemsMobile : [320,1],
        pagination :true,
        autoPlay : true
    });
});

Thanks in advance for your answers!

Answer 1

1. try kenwheeler.github.io/slick and slickSetOption
2. you can set a condition for the screen width and start initialization with different parameters.
Also add conditions to the resize event
Where there should be 3 slides in general there should be a carousel, maybe it is only on mobile?

Answer 2

The slider is really only on mobile, how to implement in this case?
I present it like this, right?
1) The usual list ul>li>a (horizontal and vertical position through flex) for desktop and tablet, and for the mobile version, simply assign the owlCarousel or slick class to the ul list.
2) If you use the standard carousel from Bootstrap

<div id="carousel" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner">
    <div class="item active">
      <div class="news">

      </div>
    </div>
    <div class="item">
      <img src="..." alt="...">
    </div>
    <div class="item">
      <img src="..." alt="...">
    </div>
  </div>
</div>