Bootstrap Carousel not wrapping left

Question

the Bootstrap Carousel works as expected except for the fact that it wont go from the first slide to the last slide when clicking the left arrow. the left arrow works perfectly except for at the first slide, and then the carousel goes away.

$(document).ready(function() {
    $('#myCarousel').carousel({
        interval: false,
    });
});

<div class="row">
        <div id="myCarousel" class="carousel slide">
            <div class="carousel-inner">
                <!-- Indicators -->
                <ul class="carousel-indicators">
                    <li data-target="#myCarousel" class="active"></li>
                    <li data-target="#myCarousel"></li>
                    <li data-target="#myCarousel"></li>
                    <li data-target="#myCarousel"></li>
                </ul>

                <!-- Slide 0 -->
                <div class="item active">
                    <img src="carousel0.jpg">
                    <div class="carousel-caption">
                        <h3>Image 0</h3>
                        <p>Image 0 Description</p>
                    </div>
                </div>
                <!-- Slide 1 -->
                <div class="item">
                    <img src="carousel1.jpg">
                    <div class="carousel-caption">
                        <h3>Image 1</h3>
                        <p>Image 1 Description</p>
                    </div>
                </div>
                <!-- Slide 2 -->
                <div class="item">
                    <img src="carousel2.jpg">
                    <div class="carousel-caption">
                        <h3>Image 2</h3>
                        <p>Image 2 Description</p>
                    </div>
                </div>
                <!-- Slide 3 -->
                <div class="item">
                    <img src="carousel3.jpg">
                    <div class="carousel-caption">
                        <h3>Image 3</h3>
                        <p>Image 3 Description</p>
                    </div>
                </div>
            </div>

            <!-- Controls -->
            <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
                <span class="glyphicon glyphicon-chevron-left"></span>
            </a>
            <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
                <span class="glyphicon glyphicon-chevron-right"></span>
            </a>
        </div>

Fiddler: https://jsfiddle.net/z4b2bwg6/7/

Answer 1

Have you tried it without interval:false ?

interval: The amount of time to delay between automatically cycling an item. If false, carousel will not automatically cycle.

Also, is wrap set to true ?

wrap: Whether the carousel should cycle continuously or have hard stops.

Answer 2

Check and remove your extra comma in the js script -

$(document).ready(function() {
    $('#myCarousel').carousel({
        interval: false
    });
});

Then remember to put the jQuery code below the html code for carousal.

After doing that it works for me.

Check the demo at - Code and demo of carousal

If it still doesn't work there must be some other problem, maybe rogue javascript code or unclosed div tag.