在Bootstrap轮播滑动过程中如何防止鼠标加载图标?

时间:2017-04-16 12:03:53

标签: jquery css twitter-bootstrap

我在Magento主页上使用Bootsrap轮播示例代码。问题是鼠标图标变为" aero working"将我自己的Bootstrap轮播代码添加到主页后,每4秒钟生成一次图标。主页上还有其他内置的Bootstrap轮播,但身份不同,他们没有这个问题。如何解决此问题而不禁用自动滚动?

更新:噪音的来源是另一个试图连接到云端的软件。



.carousel-inner.vertical {
  height: 279px; /*Note: set specific height here if not, there will be some issues with IE browser*/
}

#carousel-pager .carousel-control.left {
	position: absolute;
    width: 10%;
}
#carousel-pager .carousel-control.right {
    position: absolute;
    width: 10%;
}
.carousel-indicators {
    position: absolute;
    right: 0;
    bottom: 10px;
    left: 0;
    z-index: 15;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    padding-left: 0;
    margin-right: 15%;
    margin-left: 15%;
    list-style: none;
}
.carousel-indicators li {
    position: relative;
    -webkit-box-flex: 1;
    -webkit-flex: 1 0 auto;
    -ms-flex: 1 0 auto;
    flex: 1 0 auto;
    max-width: 30px;
    height: 3px;
    margin-right: 3px;
    margin-left: 3px;
    text-indent: -999px;
    cursor: pointer;
    background-color: rgba(255,255,255,.5);
	border-radius: 0;
	border: none;

}

.carousel-indicators li::after {
    position: absolute;
    bottom: -10px;
    left: 0;
    display: inline-block;
    width: 100%;
    height: 10px;
    content: "";
}

.carousel-indicators li::before {
    position: absolute;
    top: -10px;
    left: 0;
    display: inline-block;
    width: 100%;
    height: 10px;
    content: "";
}

.carousel-indicators .active {
	margin: 1px;
    position: relative;
    -webkit-box-flex: 1;
    -webkit-flex: 1 0 auto;
    -ms-flex: 1 0 auto;
    flex: 1 0 auto;
    max-width: 30px;
    height: 3px;
    margin-right: 3px;
    margin-left: 3px;
    text-indent: -999px;
    cursor: pointer;
	background-color: rgba(255,255,255,.9);
}

           <div id="carousel-pager" class="carousel slide " data-ride="carousel" data-interval="5000">

                <div class="carousel-inner">
                    <div class="active item">
                        <img src="http://placehold.it/234x279/f44336/000000&amp;text=First+Slide" class="img-responsive">
                    </div>
                    <div class="item">
                        <img src="http://placehold.it/234x279/e91e63/000000&amp;text=Second+Slide" class="img-responsive">
                    </div>
                    <div class="item">
                        <img src="http://placehold.it/234x279/9c27b0/000000&amp;text=Third+Slide" class="img-responsive">
                    </div>
                </div>

  <ol class="carousel-indicators">
    <li data-target="#carousel-pager" data-slide-to="0" class="active"></li>
    <li data-target="#carousel-pager" data-slide-to="1"></li>
    <li data-target="#carousel-pager" data-slide-to="2"></li>
  </ol>

</div>
&#13;
&#13;
&#13;

enter image description here

1 个答案:

答案 0 :(得分:0)

可能不是最好的,但您可以尝试在旋转木马上添加CSS指针效果:

#carousel-pager {
    cursor: pointer;
}