2

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}
>
vivek kn
  • 107
  • 1
  • 18
  • 45
  • Hi. The codesandbox is not working. In order to help, we should fix it by ourselves. Can you fix it for us so we could play with it? – Mosh Feu Apr 05 '22 at 08:41
  • @MoshFeu i have updated it to a working codesandbox pls check now – vivek kn Apr 05 '22 at 08:50
  • @MoshFeu if error is comming in first load just refresh the codesand box it will run – vivek kn Apr 05 '22 at 08:58
  • Seems like you have all the elements so if I understand correctly the only thing left is to place the right / left buttons in the slides sides instead of in the bottom? Is that right? – Mosh Feu Apr 05 '22 at 09:19
  • yes you are correct @MoshFeu – vivek kn Apr 05 '22 at 09:24
  • By the way - from owl github: "YEAH SO THIS IS PRETTY MUCH DEAD, DO YOURSELF A FAVOR AND SWITCH TO tiny-slider" https://github.com/ganlanyuan/tiny-slider – Ezra Siton Apr 05 '22 at 15:48

1 Answers1

1

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.

Mosh Feu
  • 28,354
  • 16
  • 88
  • 135