Twitter Bootstrap Question posted in

Bootstrap Carousel Buttons Are Having Problems – Twitter bootstrap

I am working on a website, and Twitter Bootstrap’s carousel controls don’t seem to be working. Clicking on indicators allows me to navigate, and the .carousel() function works, so the website scrolls through the images without any problems, but when I try to navigate using the buttons, I can move one image to either way, but after that clicking on the button just sends me back to the previous animation, before sending me to the slide I was already on. Here’s my code 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div id="mainCarousel" class="carousel slide" data-ride="carousel" data-interval="6000">

    <ol class="carousel-indicators">
        <li data-target="mainCarousel" data-slide-to="0" id="cib1" class="active"></li>
        <li data-target="#mainCarousel" data-slide-to="1" id="cib2"></li>
        <li data-target="#mainCarousel" data-slide-to="2" id="cib3"></li>
        <li data-target="#mainCarousel" data-slide-to="3" id="cib4"></li>
    </ol>

    <div class="carousel-inner" role="listbox">
        <div class="item active">
            <img src="/res/img/carousel/image1.png" />
        </div>
        <div class="item">
            <img src="/res/img/carousel/image2.png" />
        </div>
        <div class="item">
            <img src="/res/img/carousel/image3.png" />
        </div>
        <div class="item">
            <img src="/res/img/carousel/image4.png" />
        </div>
    </div>

    <a class="left carousel-control" href="#mainCarousel" role="button" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
    </a>
    <a class="right carousel-control" href="#mainCarousel" role="button" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
    </a>
</div>

<script>
    $("#mainCarousel").carousel();
</script>

Sorry if I explained it badly. I can’t give anything visual. It seems to only be a problem with the website I’m making, because the code snippet works perfectly on here. In short, the left navigation button, for instance, will take me to the left once, but every time I click it after that, it moves to the right with no animation, before sliding back to the left, leaving me on the same slide I started on.

EDIT:
I am using Angular JS with routing on the same website, so that might affect how the carousel works.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    I discovered the answer with a different question. After remembering that I had Angular Routing, I could narrow my search. Here's the answer: Bootstrap carousel not working with angularjs


  2. 0

    See if this works, you have a few small errors in your code. You added / after the the end of the img source, not sure why. You forgot a # before the first main carousel in your ordered list, and the script at the end is unnecessary. I have done this for you here: https://jsfiddle.net/owq0e5vv/ and it seems to work fine.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search