How to prevent mouse loading icon during Bootstrap carousel sliding?

Question

I am using Bootsrap carousel example code in my Magento homepage. The problem is that the mouse icon changes to "aero working" icon every 4 second after adding my own Bootstrap carousel code to the homepage. There are other built-in Bootstrap carousels in the homepage but with different IDs and they don't have this problem. How to fix this problem without disabling auto scrolling?

Update: The source of the noise was from another software which tries to connect to the cloud.

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

Answer 1

Might not be the best, but you could try to add a CSS pointer effect onto the carousel:

#carousel-pager {
    cursor: pointer;
}