Home/ Questions/Q 8907901
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-15T03:02:04+00:00

I have implemented a twitter bootstrap carousel into my page but have run into

  • 0

I have implemented a twitter bootstrap carousel into my page but have run into an issue with it. It will navigate through the three images I have added to it, but after the last image is loaded instead of looping back to the first image it seems to create and empty item in the carousel, and pause for a few seconds before returning to the first image. It scrolls correctly when using the “left” arrow but adds an empty image when using the “right” arrow. Any help would be appreciated. I have initialized the carousel in my .js file.

<div id="myCarousel" class="carousel slide">        
  <div class="carousel-inner">            
  <!-- Carousel items -->            
  <div class="active item" style="background: none repeat scroll 0% 0% #000000">
    <img width="1700" height="500" alt="" src="/cmsimages/0/globe---Copy.png" style="margin: auto" />
  </div>

  <!--2nd carousel item-->            
  <div class="item" style="background: none repeat scroll 0% 0% #000000">
    <img width="1716" height="530" alt="" src="/cmsimages/0/devwordcloud.jpg" />
  </div>

  <div class="item" style="background: none repeat scroll 0% 0% #000000">
    <img width="1716" height="530" alt="" src="/cmsimages/0/Clouds.png" />   
  </div>            
  <!-- Carousel nav -->
  <a data-slide="prev" href="#myCarousel" class="left carousel-control">‹</a>
  <a data-slide="next" href="#myCarousel" class="right carousel-control">›</a>
  <!-- End Carousel --> 
  </div>
</div>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    after editing the code you posted and seeing it clearer I was able to see that you included the carousel nav within the carousel-inner block, which should be outside of it..

    <div id="myCarousel" class="carousel slide">        
  <div class="carousel-inner">            
    <!-- Carousel items -->            
    <div class="active item" style="background: none repeat scroll 0% 0% #000000">
      <img width="1700" height="500" alt="" src="/cmsimages/0/globe---Copy.png" style="margin: auto" />
   </div>

    <!--2nd carousel item-->            
    <div class="item" style="background: none repeat scroll 0% 0% #000000">
      <img width="1716" height="530" alt="" src="/cmsimages/0/devwordcloud.jpg" />
    </div>

    <div class="item" style="background: none repeat scroll 0% 0% #000000">
      <img width="1716" height="530" alt="" src="/cmsimages/0/Clouds.png" />   
    </div>
  </div> <!-- / carousel-inner -->

  <!-- Carousel nav -->
  <a data-slide="prev" href="#myCarousel" class="left carousel-control">‹</a>
  <a data-slide="next" href="#myCarousel" class="right carousel-control">›</a>
  <!-- End Carousel --> 
</div>
    • 0