单击图像右侧时，防止自举轮播滑动

I noticed that when you click on the right hand side or left hand side of a bootstrap carousel image it will slide to the next frame. Is there a way to prevent it from going to the next image unless I click directly on the glyphicon control?

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

Ex. I only want to slide to the next image if I click directly on the arrow.

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

In my case I'm using these controls below.

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

<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>

4 个解决方案

#1

I solved it by adding a higher z-index value: 200

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

#2

EDIT: This is more of a css question than anything. Here's the edited css and html with the addition of the FA trashcan. Sorry for not being clearer earlier.

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

Here is a jsfiddle that does what you would like it to do as well https://jsfiddle.net/xgilmore/rdfzngz9/1/

这是一个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;
}

#3

-2

Use data-interval="false" it will prevent automatic sliding.

使用data-interval =“false”它会阻止自动滑动。

#4

-2

$('.carousel').carousel({ interval: false });

$（'。carousel'）。carousel（{interval：false}）;

#1