ブートストラップカルーセルのスライド中にマウスのアイコンが表示されないようにするにはどうすればいいですか？

Question

私はMagentoホームページにBootsrapカルーセルのサンプルコードを使用しています。問題は、自分のBootstrapカルーセルコードをホームページに追加した後、マウスアイコンが4秒ごとに "aero working"アイコンに変わることです。ホームページには別の内蔵ブートストラップカルーセルがありますが、IDは異なりますが、この問題はありません。どのように自動スクロールを無効にせずにこの問題を解決するには？

更新：ノイズの原因は、クラウドに接続しようとする別のソフトウェアからのものです。

.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 { 
 
\t 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); 
 
\t border-radius: 0; 
 
\t 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 { 
 
\t 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; 
 
\t 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>

Answer 1

最善ではないかもしれませんが、カルーセル上にCSSポインタ効果を追加しようとすることができます：

#carousel-pager { 
    cursor: pointer; 
}