Carousel Bootstrap version 3.3 does not rotate

Question

I have the following problem: I want to implement a Carousel with Bootstrap version 3.3.7 on my website. The code looks like this:

<!-- Carousel
================================================== -->
<div class="row dark-start d-none d-lg-block">
  <div class="col-md-12">
    <div id="categoryExampleSlider" class="carousel slide" data-ride="carousel">
      <!-- Indicators -->
      <ol class="carousel-indicators">
        <li data-target="#categoryExampleSlider" data-slide-to="0" class="active"></li>
        <li data-target="#categoryExampleSlider" data-slide-to="1"></li>
        <li data-target="#categoryExampleSlider" data-slide-to="2"></li>
        <li data-target="#categoryExampleSlider" data-slide-to="3"></li>
        <li data-target="#categoryExampleSlider" data-slide-to="4"></li>
        <li data-target="#categoryExampleSlider" data-slide-to="5"></li>
      </ol>
      <div class="carousel-inner" role="listbox">
        <div class="item active">
          <img src="../imgs/slider1_sport.jpg" alt="sport">
        </div>
        <div class="item">
          <img src="../imgs/slider2_outdoor.jpg" alt="outdoor">
        </div>
        <div class="item">
          <img src="../imgs/slider3_senioren.jpg" alt="ass">
        </div>
        <div class="item">
          <img src="../imgs/slider4_ass.jpg" alt="ass">
        </div>
        <div class="item">
          <img src="../imgs/slider5_risiko.jpg" alt="risiko">
        </div>
        <div class="item">
          <img src="../imgs/slider6_rettervideo.jpg" alt="rettervideo">
        </div>
      </div>
      <a class="left carousel-control" href="#categoryExampleSlider" 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="#categoryExampleSlider" role="button" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
      </a>
    </div><!-- /.carousel -->
  </div>
</div>

The controls and the indicators are displayed but it does not rotate. Neither automatically nor when I click on the controls and/or indicators.

What am I doing wrong here?

score 0 · Accepted Answer · answered Aug 26 '19 at 13:25

Try with bootstrap 3.4.0 version. You need to change the version. It absolutely works. This example is useful for u.

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>
    <div class="row dark-start d-none d-lg-block">
        <div class="col-md-12">
            <div id="categoryExampleSlider" class="carousel slide" data-ride="carousel">
                <ol class="carousel-indicators">
                    <li data-target="#categoryExampleSlider" data-slide-to="0" class="active"></li>
                    <li data-target="#categoryExampleSlider" data-slide-to="1"></li>
                    <li data-target="#categoryExampleSlider" data-slide-to="2"></li>
                    <li data-target="#categoryExampleSlider" data-slide-to="3"></li>
                    <li data-target="#categoryExampleSlider" data-slide-to="4"></li>
                    <li data-target="#categoryExampleSlider" data-slide-to="5"></li>
                </ol>
                <div class="carousel-inner" role="listbox">
                    <div class="item active">
                        <img src="public/images/1.svg" alt="sport">
                    </div>
                    <div class="item">
                        <img src="public/images/1.svg" alt="outdoor">
                    </div>
                    <div class="item">
                        <img src="public/images/1.svg" alt="ass">
                    </div>
                    <div class="item">
                        <img src="public/images/1.svg" alt="ass">
                    </div>
                    <div class="item">
                        <img src="public/images/1.svg" alt="risiko">
                    </div>
                    <div class="item">
                        <img src="public/images/1.svg" alt="rettervideo">
                    </div>
                </div>
                <a class="left carousel-control" href="#categoryExampleSlider" 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="#categoryExampleSlider" role="button" data-slide="next">
                    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                    <span class="sr-only">Next</span>
                </a>
            </div>
        </div>
    </div>
</body>
</html>

Thank you for the tip with the update to version 3.4.0. I'm now using version 3.4.1 and it does exactly what it want. Does my previous version (3.3.7) not support the Carousel? — Premox, Aug 28 '19 at 11:37

score 0 · Answer 2 · answered Aug 26 '19 at 13:35

@premox this is your exact answer I didn't change anything except writing CDN links and your good to go:
Check below snippet copied you exact code.

By this I guess you have wrong jquery link in your code.

.item {
height : 400px;
width : 400px;
border: 1px solid red;
margin: auto;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<div class="row dark-start d-none d-lg-block">
  <div class="col-md-12">
    <div id="categoryExampleSlider" class="carousel slide" data-ride="carousel">
      <!-- Indicators -->
      <ol class="carousel-indicators">
        <li data-target="#categoryExampleSlider" data-slide-to="0" class="active"></li>
        <li data-target="#categoryExampleSlider" data-slide-to="1"></li>
        <li data-target="#categoryExampleSlider" data-slide-to="2"></li>
        <li data-target="#categoryExampleSlider" data-slide-to="3"></li>
        <li data-target="#categoryExampleSlider" data-slide-to="4"></li>
        <li data-target="#categoryExampleSlider" data-slide-to="5"></li>
      </ol>
      <div class="carousel-inner" role="listbox">
        <div class="item active">
          <img src="../imgs/slider1_sport.jpg" alt="sport">
        </div>
        <div class="item">
          <img src="../imgs/slider2_outdoor.jpg" alt="outdoor">
        </div>
        <div class="item">
          <img src="../imgs/slider3_senioren.jpg" alt="ass">
        </div>
        <div class="item">
          <img src="../imgs/slider4_ass.jpg" alt="ass">
        </div>
        <div class="item">
          <img src="../imgs/slider5_risiko.jpg" alt="risiko">
        </div>
        <div class="item">
          <img src="../imgs/slider6_rettervideo.jpg" alt="rettervideo">
        </div>
      </div>
      <a class="left carousel-control" href="#categoryExampleSlider" 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="#categoryExampleSlider" role="button" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
      </a>
    </div><!-- /.carousel -->
  </div>
</div>

Carousel Bootstrap version 3.3 does not rotate

2 Answers2