UI Bootstrap控制uib-carousel与自定义按钮

Question

我试图通过按钮控制旋转木马,而不是旋转木马上面的控件(我将隐藏雪佛龙图标).

我检查了雪佛龙图标,并在源中找到了这个:

<a role="button" href="" class="left carousel-control" ng-click="prev()" ng-class="{ disabled: isPrevDisabled() }" ng-show="slides.length > 1">
  <span aria-hidden="true" class="glyphicon glyphicon-chevron-left"></span>
  <span class="sr-only">previous</span>
</a>

我尝试将属性(类除外)添加到按钮,但它不起作用:

<button type="button" class="btn btn-default btn-block" ng-click="prev()" ng-class="{ disabled: isPrevDisabled() }" ng-show="slides.length > 1">Previous</button>

• 我猜它不起作用因为按钮不在uib-carousel中,所以它不知道'prev()'和'isPrevDisabled()'函数是什么.我可以参考该功能,还是创建我自己的功能来控制它？

Plnkr演示

我注意到的另一件事,但它是偏离主题的,如果你双击右或左V形按钮(让我们说右边),它只向右滑动一个.然后,如果我单击左V形,它会向右移动一次,然后向左移动(当您第二次单击左V形)时.有什么方法可以解决这个'问题'吗？它应该在双击时移动2个幻灯片,或者丢弃第2个单击,当单击相反方向时,请正确执行该操作.

Answer 1

这是一个 CSS 解决方案，可以将“箭头按钮”向下操纵到按钮的位置。去掉背景渐变并将按钮放置在箭头按钮内。

a.right.carousel-control {
  position: absolute !important;
  top: 100%;
  width: 385px;
  right: 16px;
  height: 39px;
  z-index: 2;
}
a.left.carousel-control {
  position: absolute !important;
  top: 100%;
  width: 385px;
  left: 16px;
  height: 39px;
  z-index: 2;
}
.carousel-control.left, .carousel-control.right {
  background-image: none !important;
}
 https://plnkr.co/edit/qlh8UOfa6RFbMa5BKGR2