左右卡片的OwlCarousel导航：react js

Question

我正在尝试实施 owl-carousel。我想一次显示单个项目，并在我的卡片的左侧和右侧有一个下一个和上一个按钮我不知道如何实现，请帮助我。

我尝试过的我会添加到codesandbox

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

Answer 1

您可以按照将按钮放置在非反应版本的 owlcarousel 中。

添加navText

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

和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

注意：我不得不说我不是这个解决方案的忠实粉丝，因为按钮保留在底部的位置。只有 span 向两侧移动，但除此之外，我认为效果很好。

左右卡片的OwlCarousel导航：react js

OwlCarousel navigation for cards in left and right :react js

css

reactjs

owl-carousel