Search code examples
cssreactjsowl-carousel

OwlCarousel navigation for cards in left and right :react js

I am trying to implement . I want to show single item at a time and have a next and previous button on left and right of my cards I don't know how to implement that, pls help me.

What I have tried I will add in codesandbox

<OwlCarousel
  className="owl-theme"
  loop={true}
  nav={true}
  items={1}
  autoHeight={true}
>
Solution

  • You can follow the other answer about placing the buttons in non react version of owlcarousel.

    Add navText

    navText={[
  '<span class="arrow prev">‹</span>',
  '<span class="arrow next">›</span>'
]}

    and css

    .arrow {
  position: absolute;
  border-radius: 3px;
  font-size: 26px;
  top: 50%;
}

.arrow:hover {
  background: #869791;
  color: #fff;
}

.next {
  right: 10px;
}

.prev {
  left: 10px;
}

    https://codesandbox.io/s/cranky-surf-982xxs?file=/src/App.js

    Note: I have to say that I'm not a big fan of this solution because the buttons remain in their place at the bottom. Only the spans moving to the sides but other than that, I think it works well.