Bootstrap Carousel Image Transition Slide Not Working

Question

I am having an issue with the Bootstrap Carousel component, where the image is not sliding during transition.

Basically, the image seems to just get replaced (and does not slide) as can be seen from the Bootstrap site.

The other issue I am facing is that the image, when changing from one to the other seems to get overlaid on top of the left and right chevron icon controls.

I've scoured SO and found something similar:

Twitter Bootstrap Carousel Not Sliding

But the solution provided does not seem to apply for me as I am using the minified version of the Bootstrap JS which already has the transition function embedded.

Anyone came across a similar issue before?

As Leon has asked for some codes, I am practically perusing the same codes as posted in the Bootstrap website. Its just the issue has been the same where the image is not sliding in transition, but rather just getting invisible / visible and after a while where the slide gets visible, the chevron control seems to be behind the image (for a split second) and then gets on top of the image afterwards.

<!-- Carousel [START] -->
<div id="myCarousel" class="carousel slide" data-ride="carousel">

    <!-- <ol class="carousel-indicators">
        <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
        <li data-target="#myCarousel" data-slide-to="1"></li>
        <li data-target="#myCarousel" data-slide-to="2"></li>
    </ol> -->

    <div class="carousel-inner" role="listbox">
        <div class="item active">
            <img src="assets/img/slider-images/header-images-01.jpg" alt="Slide 1" class="img-responsive">
        </div>

        <div class="item">
            <img src="assets/img/slider-images/header-images-02.jpg" alt="Slide 2" class="img-responsive">
        </div>

        <div class="item">
            <img src="assets/img/slider-images/header-images-03.jpg" alt="Slide 3" class="img-responsive">
        </div>
    </div>

    <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left glyphcolor" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
    </a>

    <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right glyphcolor" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
    </a>
</div>
<!-- Carousel [END] -->

UPDATE: The chevron icon also gets covered when I clicked on it to transition to the next slide.

I was not able to reproduce the bug using your code, see the jsfiddle http://jsfiddle.net/6javxp2z/ (I replaced the picture urls for some dummy pictures). Using bootstrap 3.2.0 and jQuery version 2.1.0 everything seems to run smoothly. I also only included two slides but this should not be a problem. — Dominic Boulanger, Jan 28 '15 at 16:29
The problem must be coming from another place earlier in your code and makes the carousel display weirdly. Any errors showing up in your browser's developer's console? — Dominic Boulanger, Jan 28 '15 at 16:41
No errors are showing up in the console, hence, I am really stumped on this issue. — Batuta, Jan 28 '15 at 19:36

score 0 · Answer 1 · answered Nov 08 '17 at 00:55

Check out the css of div.item, if you have position: absolute / relative. In other cases, try to create new document only your carousel, check if it works alone and if that's the case, your problem must be coming from earlier part of your code... Sometimes console wont show you what's wrong so you'll have to trace by yourself

Bootstrap Carousel Image Transition Slide Not Working

1 Answers1