Search code examples
javascriptjqueryhtmlthymeleafcarousel

Bootstrap carousel is not sliding


I am trying to use the bootstrap carousel but it only shows the pictures an the slides doesnt work. The other older questions about this topic doesn't lead me to the correct solution. what im doing wrong? Iam not sure how to handle with the jquery, i think

<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
        <ol class="carousel-indicators">
            <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
            <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
            <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
        </ol>
        <div class="carousel-inner">
            <div class="carousel-item active">
                <img class="d-block w-100" src="img/123.jpg" alt="First slide">
                <div class="container">
                    <div class="carousel-caption text-left">
                        <div align="center">
                            <p>Hier kommen Sie zur Übersicht unserer Zimmer</p>
                            <p><a th:href="@{/catalog/}" class="btn btn-primary">Zimmerbuchen</a></p>
                        </div>
            </div>
            <div class="carousel-item">
                <img class="d-block w-100" src="img/1234.jpeg" alt="Second slide">
            </div>
            <div class="carousel-item">
                <img class="d-block w-100" src="12345.jpeg" alt="Third slide">
            </div>
        </div>
        <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
        </a>
        <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
        </a>
    </div>
</body>
</html>

Solution

  • Have you initialized your carousel like this?

    <!-- Calling jquery first -->
    <script language="JavaScript" type="text/javascript" src="scripts/jquery.js"></script>
    <script language="JavaScript" type="text/javascript" src="scripts/bootstrap.min.js"></script>
      <!-- Carousel -->
    <script language="JavaScript" type="text/javascript">
      $(document).ready(function(){
        $('.carousel').carousel({
          interval: 3000
        })
      });    
    </script>