Question

我注意到当你点击自举转盘图像的右侧或左侧时，它会滑动到下一帧。有没有办法阻止它进入下一个图像，除非我直接点击glyphicon控件？

实施例。如果我直接点击箭头，我只想滑到下一个图像。

在我的情况下，我在下面使用这些控件。

<a style="visibility: @visible;" class="left carousel-control" href="#profile-carousel" role="button" data-slide="prev">
                    <span class="glyphicon glyphicon-chevron-left" style="font-size: 20px;" aria-hidden="true"></span>
                    <span class="sr-only">Previous</span>
                </a>
                <a style="visibility: @visible;" class="right carousel-control" href="#profile-carousel" role="button" data-slide="next">
                    <span class="glyphicon glyphicon-chevron-right" style="font-size: 20px;" aria-hidden="true"></span>
                    <span class="sr-only">Next</span>
                </a>

Answer 1

我通过添加更高的z-index值来解决它：200

Answer 2

编辑：这不仅仅是一个css问题。这是编辑过的css和html，添加了FA垃圾桶。很抱歉没有更清楚。

这是一个jsfiddle，可以做你想做的事情 https://jsfiddle.net/xgilmore/rdfzngz9/1/

<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>
<div class="trash"><a href="#"> <span class="fa fa-trash-o"></span></a></div>

.item {
    margin-left:auto;
    margin-right: auto;
    z-index: 0;
}

.carousel-control{
    position: absolute;
    top: 50%;
    bottom: 0px;
    left: 0px;
    width: 3%;
    height: 3%;
    font-size: 20px;
    color: #FFF;
    text-align: center;
    text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.);
    background-color: none;
    opacity: 1;
    z-index: 1;
}

.carousel-control.left {
    background-repeat: repeat-x;
    background-image:none;
    z-index: 1;
}

.carousel-control.right {
    background-repeat: repeat-x;
    background-image:none;
    z-index: 1;
}

.trash {
    float: right;
    z-index: 99;
    margin-top:-20px;
    position: relative;
}

Answer 3

我遇到了同样的问题，并通过在pointer-events: none和.carousel-control-prev中添加.carousel-control-next（以使click事件通过该元素）并将pointer-events: initial添加到.carousel-control-prev-icon和.carousel-control-next-icon。这样，单击图标仍然可以滑动到上一张/下一张幻灯片。

Answer 4

使用data-interval =＆＃34; false＆＃34; 它会阻止自动滑动。

Answer 5

$（＆＃39; .carousel＆＃39）。转盘（{ interval：false }）;

单击图像右侧

5 个答案: