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.

我将在codesandbox中添加我try 过的内容

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

推荐答案

你可以遵循other answer条关于在无react 版本的cat Owl 转盘中放置按钮的规则.

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人左右移动,但除此之外,我认为效果很好.

Css相关问答推荐

添加Angular 17的Stackblitz项目的Angular material 主题?

在COLOR-MIX()中使用var()似乎会使其对于不支持COLOR-MIX()的浏览器具有可读性,从而阻止了回退的工作

如何在CSS中平滑线性平移动画

背景图像允许溢出输入按钮

使用带有 fr 单位的 calc 函数

来自 A 队和 B 队的类污染了同一个全局命名空间

背景上带有文本的按钮的反转 colored颜色

Vue.js 变量中的动态类变量

根据选项 colored颜色 更改 Select 文本 colored颜色

我怎样才能将我的按钮向上移动,因为文本是

react 样式的条件类名称设置

Tailwind:如何设置网格的自动填充?

紫色表示访问过的超链接

CSS类和id同名

仅针对直接子代而不是其他相同后代的 CSS Select 器

Bootstrap 3 - 在每个网格列之后打印布局和中断

纯 CSS 滚动动画

Sass 无效的 CSS 错误:预期的表达式

为什么对 HTML 表单而不是表格使用定义列表(DL、DD、DT)标签?

仅使用 CSS 交换 DIV 位置