Show loading spinner before Bootstrap Carousel Load

Question

I'm trying to show a spinner before a carousel loads and also when you click left and right controls of the carousel. Currently I'm able to show a spinner before page load using the following code..

 //HTML code

  <script src="js/jquery-1.11.3.min.js"></script>

 code just after body tag
  <div id="loader">
  </div>

  //CSS code..

  #loader{
  z-index:999999;
  display:block;
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background:url(../images/loader.gif) 50% 50% no-repeat rgb(249,249,249); 
  }

  //JS code..

  $(window).load(function(){
        $("#loader").delay(1000).hide(0).fadeOut("slow");
    });

Using the above logic now I'm trying to display a spinner of smaller size and transparent background every time user clicks the left/right controls of the bootstrap using the below code..

HTML code ..

    <div id="carouselObject">
            <div id="carousel-example-generic" class="carousel slide" data-pause="true" data-interval="5000000">    <!--data-interval= 5000 seconds-->  
                <div class="carousel-inner" role="listbox" id="carouselinner">

                </div>

                <a class="left carousel-control" href="#/carousel-example-generic" role="button">               <!--data-slide="prev"-->
                    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true" onclick="loadPrevSlide()" id="leftcarouselbutton"></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" onclick="loadNextSlide()" id="rightcarouselbutton"></span>
                    <span class="sr-only">Next</span>
                </a>
            </div>
        </div>

       <div id="carousel_spinner">
       </div>

CSS code ...

        #carousel_spinner{
        z-index:999999;
        display:block;
        position:fixed;
        top:0;
        left:0;
        width:50%;
        height:50%;
        background:url(../images/loader.gif) 50% 50% no-repeat; 
        }

JS code ..

 function loadNextSlide(){
    $("#carousel_spinner").delay(1000).hide(0).fadeOut("slow");
 }

The above code shows a small spinner on the top left side on page load and when I click on the right control of carousel no spinner is shown.. Can't understand where I'm going wrong..Please help..

Answer 1

Bootstrap Doc:

According to bootstrap documentation Carousel offers following events:

• slide.bs.carousel

  Occurs when the carousel is about to slide from one item to another

• slid.bs.carousel

  Occurs when the carousel has finished sliding from one item to another

---

What you need:

is to put your spinner code inside:

$("#carouselObject").on('slide.bs.carousel', function () {
           //show spinner here
 });

And then hide that spinner code in slid event:

$("#carouselObject").on('slid.bs.carousel', function () {
       //hide the spinner here
       $("#carousel_spinner").delay(1000).hide(0).fadeOut("slow");
    });

PS: The above code is not tested but it will take you where you are heading