Question

我有一个指令，基本上是Angular UI bootstrap的轮播扩展。

但是，我一直试图通过覆盖CSS（使用我自己的）来将旋转木马控制箭头移出框架，但没有运气。我已经尝试了post中的建议，但仍然没有运气。

我作为一种解决方法做的是使用AngularJS的脚本指令定义自己的轮播控件箭头类而不是引导程序中的预定义箭头类：

<script ... type="text/ng-template">

<div class='carousel' ng-mouseenter="pause()" ng-mouseleave="play()" ng-swipe-right="prev()" ng-swipe-left="next()">
    <div class="carousel-inner" ng-transclude></div>
    <a class="left-control" ng-click="prev()"> ...</a> //dont use the one from bootstrap which is carousel-control left
</div> 
</script>

我的CSS：

    .carousel {margin-left: 45px; margin-right: 25px;}

    .left-control, .right-control {
         background: none;
        border: none;
   }
.left-control {margin-left: -45px; color: black;}
.right-control {margin-right: -45px; color: black;}

我尝试将它们很好地对齐到我的CSS中的一行（左箭头，旋转木马内侧和右箭头），但我仍然无法使所有3个元素正确对齐。感谢任何帮助！

Answer 1

您可以尝试以下代码：

.left-control,.right-control { position:absolute; }
.left-control {margin-left: -45px; color: black;}
.right-control {margin-right: -45px; color: black;}

它使元素绝对，因此它们可以相当自由地定位。您可能希望使用right:-10px为.right-control调整更多内容。 10px取决于元素的大小。左控制按钮也是如此..

将旋转木马控制箭头从旋转木马框架中取出

1 个答案: