0

I've been trying to use owl carousel vertically but i'm not able to solve it

HTML Code

<div class="item"><h4>3</h4></div>
        <div class="item"><h4>4</h4></div>
        <div class="item"><h4>5</h4></div>
</div>

My JS

 $('.owl-carousel').owlCarousel({
    loop:true,
    margin:10,
    nav:true,
    responsive:{
        0:{
            items:1
        },
        600:{
            items:3
        },
        1000:{
            items:1
        }
    }
})
Asutosh
  • 1,775
  • 2
  • 15
  • 22
Suzan Maharjan
  • 15
  • 1
  • 4
  • Welcome to Stack Overflow. What have you already tried yourself to do this? We can help with problems you're having with your code, but you need to do some research and make a good attempt at doing it yourself first. Please browse the [help for asking questions](https://stackoverflow.com/help/asking) & this [question checklist](https://meta.stackoverflow.com/questions/260648/). This is usually the best place to start [Google Search for owl carousel vertical slider](https://www.google.com/search?q=owl+carousel+vertical+slider)... – FluffyKitten Jul 29 '20 at 05:58
  • 1
    https://stackoverflow.com/questions/25079495/how-to-use-owl-carousel-vertically – s.kuznetsov Jul 29 '20 at 06:09

1 Answers1

0

Try the Swiper Js libraries

More Informations Go to the Official Page of Swiper.js

 var swiper = new Swiper('.swiper-container', {
      direction: 'vertical',
      pagination: {
        el: '.swiper-pagination',
        clickable: true,
      },
      navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
      },
      autoplay: {
            delay: 5000,
      },
    });
    html,
    body {
      position: relative;
      height: 100%;
    }

    body {
      background: #eee;
      font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
      font-size: 14px;
      color: #000;
      margin: 0;
      padding: 0;
    }

    .swiper-container {
      width: 100%;
      height: 100%;
    }

    .swiper-slide {
      text-align: center;
      font-size: 18px;
      background: #fff;

      /* Center slide text vertically */
      display: -webkit-box;
      display: -ms-flexbox;
      display: -webkit-flex;
      display: flex;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      -webkit-justify-content: center;
      justify-content: center;
      -webkit-box-align: center;
      -ms-flex-align: center;
      -webkit-align-items: center;
      align-items: center;
    }
  <!-- Swiper -->
  <div class="swiper-container">
    <div class="swiper-wrapper">
      <div class="swiper-slide">Slide 1</div>
      <div class="swiper-slide">Slide 2</div>
      <div class="swiper-slide">Slide 3</div>
      <div class="swiper-slide">Slide 4</div>
      <div class="swiper-slide">Slide 5</div>
      <div class="swiper-slide">Slide 6</div>
      <div class="swiper-slide">Slide 7</div>
      <div class="swiper-slide">Slide 8</div>
      <div class="swiper-slide">Slide 9</div>
      <div class="swiper-slide">Slide 10</div>
    </div>
    <div class="swiper-pagination"></div>
    <div class="swiper-button-next"></div>
    <div class="swiper-button-prev"></div>
  </div>

<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.css">
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css">
<script src="https://unpkg.com/swiper/swiper-bundle.js"></script>
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
Lakshmanan Kumar
  • 102
  • 1
  • 8