How do you get this carousel to go vertically?

Question

Guys I’m trying to create a Carousel that displays the items vertically. For example when clicking on the Buttons a text pass from top to bottom, I tried to do with the carousel of the bootstrap 4 but it was very bad so now I’m trying to do with the Owl Carousel using javascript, but I couldn’t and came to ask for help here , in the hope that you can help me. Follow the code of the carousel. In the case below the text is passing side, right to left and wanted to come from top to bottom.

    <div class="owl-carousel owl-theme">
            <div class="item">
              <h2">Button/h2>
              <p class="text-white"> 
texto 1
    
              </p>
            </div>
            <div class="item">
              <h2">Button</h2>
              <p class="text-white">
    texto 2
              </p>
            </div>
            <div class="item">
              <h2">Button</h2>
              <p class="text-white">
    texto 3
              </p>
            </div>
    
          </div>
        </div>



<script>
  $('.owl-carousel').owlCarousel({
    loop: true,
    margin: 10,
    nav: true,
    responsive: {
      0: {
        items: 1
      },
      600: {
        items: 1
      },
      1000: {
        items: 1
      }
    }
  })
</script>

Answer 1

$(".owl-carousel").owlCarousel({
  loop: true,
  autoplay: true,
  items: 1,
  nav: true,
  autoplayHoverPause: true,
  animateOut: 'slideOutUp',
  animateIn: 'slideInUp'
});

Testing on the Codepen: http://codepen.io/dapinitial/pen/xZaRqz