twitter bootstrap carousel disappears

Question

I think this might be a simple issue. but I cant seem to figure this one out. the best way to explain it is for you to see

Link : http://dynastyfireplaces.3dcartstores.com

if you notice the slider on the homepage. it works fine until it reaches the last slide then the slider disappears for a couple of seconds and then reappears.

I tried updating the bootstrap framework but it still doesn't fix the issue.

any ideas where the problem could be.

Source code :

<div class="carousel slide" id="myCarousel">
    <div class="carousel-inner">
        <div class="item">
            <img alt="" src="...">
        </div>       
        <div class="item">
            <img alt="" src="...">
        </div>   
        <div class="item active">
            <img alt="" src="...">
        </div>
        <a data-slide="prev" href="#myCarousel" class="left carousel-control">‹</a>
        <a data-slide="next" href="#myCarousel" class="right carousel-control">›</a>
    </div>
</div>

Answer 1

The problem comes from the .carousel-controls that should not be inside .carousel-inner : the carousel is trying to show the controls as items, causing the disappearance.

Try this :

<div class="carousel slide" id="myCarousel">
    <div class="carousel-inner">
        <div class="item">
            <img alt="" src="...">
        </div>       
        <div class="item">
            <img alt="" src="...">
        </div>   
        <div class="item active">
            <img alt="" src="...">
        </div>
    </div>
    <a data-slide="prev" href="#myCarousel" class="left carousel-control">‹</a>
    <a data-slide="next" href="#myCarousel" class="right carousel-control">›</a>
</div>