Bootstrap Carousel Transitions and Prev/Next Buttons Not Working

Question

I'm trying to implement the twitter bootstrap carousel, and it's not working - it doesn't switch images automatically, AND the previous/next buttons don't work.

I've tried switching to jquery 1.7.1 as suggested on Bootstrap Carousel Not Automatically Sliding and Bootstrap Carousel Not working, but nothing seems to help.

Any ideas would be appreciated.

<!DOCTYPE html>
<html>
    <head>
        <title>Slideshow Test</title>
        <link href="css/bootstrap.css" rel="stylesheet" type="text/css" />
        <script src="js/bootstrap.js"></script>
        <script src="js/jquery-1.7.1.min.js"></script>
        <script src="js/bootstrap-transition.js"></script>
    </head>
    <body>
        <div id="myCarousel" class="carousel slide" style="width:450px">
            <!-- Carousel items -->
            <div class="carousel-inner">
                <div class="item active"><img src="img/IMG_2.jpg"></div>                
                <div class="item"><img src="img/IMG_3.jpg"></div>
                <div class="item"><img src="img/IMG_1.jpg"></div>
                <!-- Carousel nav -->
                <a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a>
                <a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a>
            </div>
        </div>    
    </body>
</html>

You can view it and its linked files at www.abbymilberg.com/bootstrap.

https://stackoverflow.com/a/55303146/3585056 This has fixed my problem. Give ID to parent container — Arif, Jul 09 '22 at 16:30

score 27 · Answer 1 · answered Mar 06 '13 at 09:11

27

I had the same problem, even including .js in the propper order, and I fixed it unsing javascript on 'onclick' event as follows:

<a class="left carousel-control" href="#myCarousel" data-slide="prev" onclick="$('#myCarousel').carousel('prev')">‹</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next" onclick="$('#myCarousel').carousel('next')">›</a>

I know that it's not the cleanest solution but it works.

answered Mar 06 '13 at 09:11

user2139170

279
3
2

12

If you have this issue, make sure the href in the prev/next buttons refers to the correct ID. It should be #id (jquery notation). Should be no need to add onclick. – kenyee Mar 25 '13 at 18:35
2

Same issue here. I'm going for the `onclick` dirty fix but if you happen to know why it did not work I'd be glad to hear about it. – Augustin Riedinger Feb 03 '16 at 10:25
You could also add return false like this onclick="$('#carouselInner').carousel('next'); return false;" – Fede Mar 28 '17 at 12:06
Same here on bs4 – Vasil Valchev Feb 22 '18 at 21:25

score 14 · Accepted Answer · answered Sep 23 '12 at 01:14

14

You should include bootstrap.js after you include jquery.js:

<script src="js/jquery-1.7.1.min.js"></script>
<script src="js/bootstrap.js"></script>

answered Sep 23 '12 at 01:14

Daniil Ryzhkov

7,416
2
41
58

5

Also, **bootstrap-transition.js** should come prior to all other Bootstrap plugins (but still after jQuery, as Daniil correctly identified). – merv Sep 23 '12 at 02:24

score 4 · Answer 3 · answered Jun 27 '19 at 05:44

4

<div class="left carousel-control" data-target="#myCarousel" data-slide="prev"/>
          <span class="glyphicon glyphicon-chevron-left"></span>
          <span class="sr-only">Previous</span>
</div>
<div class="right carousel-control" data-target="#myCarousel" data-slide="next"/>
          <span class="glyphicon glyphicon-chevron-right"></span>
          <span class="sr-only">Next</span>
</div>

answered Jun 27 '19 at 05:44

Celena jas

39
1

1

Do a class to your button and put data-target check on my code thanks:) – Celena jas Jun 27 '19 at 05:45

score 3 · Answer 4 · answered Jan 19 '17 at 21:05

3

I had the same issue and I fixed it by adding z-index to the css:

.carousel-control.left, .carousel-control.right {
  left: 0;
  z-index: 1;
}

answered Jan 19 '17 at 21:05

Kimmiekim

301
2
6
18

This helped me since I was using a hack to change the ``.carousel-caption``'s z-index, so I had to also change the z-index of the controls so they appeared on top of the caption. – kmoser Dec 05 '17 at 07:25

score 3 · Answer 5 · answered Mar 22 '19 at 15:36

I had the same symptoms, but my problem was that I didn't included an id to my carousel. Adding an id on the same div that has the .carousel class, and using href="#my-carousel" on the button/links solved the problem for me, as suggested by other users in the comments.

<div id="my-carousel" class="carousel slide" style="width:450px">
            ^----------------------------------v
    <a class="carousel-control left" href="#my-carousel" data-slide="prev">&lsaquo;</a>
    <a class="carousel-control right" href="#my-carousel" data-slide="next">&rsaquo;</a>
</div>

score 2 · Answer 6 · answered Sep 23 '12 at 01:14

2

Try closing "carousel-inner" before the controls start

<div id="myCarousel" class="carousel slide" style="width:450px">
    <div class="carousel-inner">
        <div class="item active"><img src="img/IMG_2.jpg"></div>                
        <div class="item"><img src="img/IMG_3.jpg"></div>
        <div class="item"><img src="img/IMG_1.jpg"></div>
    </div>
    <!-- Carousel nav -->
    <a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a>
    <a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a>

</div>

answered Sep 23 '12 at 01:14

noel

2,257
3
24
39

This is because OP includes jquery after bootstrap. This will not help – Daniil Ryzhkov Sep 23 '12 at 01:15
Well it worked for these guys http://twitter.github.com/bootstrap/javascript.html#carousel – noel Sep 23 '12 at 01:16
This is because bootstrap trying to use jQuery before jQuery is avaible for use. – Daniil Ryzhkov Sep 23 '12 at 01:26
1

Thanks, I understand. Just really thought it was that div though. – noel Sep 23 '12 at 01:27
1

Putting jquery before bootstrap fixed my original problem, but after I did that it still wasn't looping correctly after going through all of my slides. Following this suggestion fixed that problem, so thanks! – Sep 23 '12 at 14:39

score 1 · Answer 7 · answered Dec 12 '15 at 01:41

Further to the answer by user2139170, this is the correct way to structure your carousel (BootStrap 3.3.5):

jsFiddle Example

<div id="myCarousel" class="carousel slide text-center" 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>
    </ol>
    <div class="carousel-inner" role="listbox">
        <div class="item active">
            <h4>A mind-bending lecture on applied philosophy by Oxford lecturer Ravi Zacharias.</h4>
            <br>
            <span class="font-normal">youtube/watch?v=3ZZaoavCsYE</span>
        </div>
        <div class="item">
            <h4>Director of the Human Genome Project discusses the greatest mystery of life</h4>
            <br>
            <span class="font-normal">youtube/watch?v=EGu_VtbpWhE</span>
        </div>
    </div>

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

<script>
    $(function(){

        $('.carousel-control').click(function(e){
            e.preventDefault();
            $('#myCarousel').carousel( $(this).data() );
        });

    });//END document.ready
</script>

Note: this answer requires jQuery, so ensure that library is loaded. Of course, bootstrap requires jQuery so you should already have it referenced.

Umar Farooq · Answer 8 · 2020-09-25T05:10:13.123

Using the below code will help you out

the buttons function well

Run the code snippet to check whether it solves your problem or not

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Carousel Example</h2>  
  <div id="myCarousel" class="carousel slide" data-ride="carousel">
    <!-- Indicators -->
    <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>

    <!-- Wrapper for slides -->
    <div class="carousel-inner">
      <div class="item active">
        <img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(2).jpg" alt="Los Angeles" style="width:100%;">
      </div>

      <div class="item">
        <img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(4).jpg" alt="Chicago" style="width:100%;">
      </div>
    
      <div class="item">
        <img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(6).jpg" alt="New york" style="width:100%;">
      </div>
    </div>

    <!-- Left and right controls -->
    <a class="left carousel-control" href="#myCarousel" data-slide="prev">
      <span class="glyphicon glyphicon-chevron-left"></span>
      <span class="sr-only">Previous</span>
    </a>
    <a class="right carousel-control" href="#myCarousel" data-slide="next">
      <span class="glyphicon glyphicon-chevron-right"></span>
      <span class="sr-only">Next</span>
    </a>
  </div>
</div>

</body>
</html>

score 0 · Answer 9 · answered Sep 07 '21 at 03:49

0

My Prev/Next buttons were not working. It was because of old versions of the bootstrap js scripts.

I used the latest recommended version of javascripts (both jquery and bootstrap) mentioned in bootstrap website and it worked

answered Sep 07 '21 at 03:49

Vikram

187
9

score 0 · Answer 10 · answered Jan 03 '22 at 08:13

0

Check if you've pasted the correct bootstrap links in the head tag. It worked for me.

answered Jan 03 '22 at 08:13

bazinga123

1
1

Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Jan 03 '22 at 08:15
try changing to different versions of bootstrap. bootstrap version 5.1x was giving me some problems so i changed it to 4.6 and it works just fine. – bazinga123 Jan 03 '22 at 08:15

score 0 · Answer 11 · edited Jun 26 '23 at 15:51

0

Try changing data-slide to data-bs-slide. This worked for me.

edited Jun 26 '23 at 15:51

Tyler2P

2,324
26
22
31

answered Jun 25 '23 at 19:06

ann

1

Bootstrap Carousel Transitions and Prev/Next Buttons Not Working

11 Answers11

Linked