Question

我正在使用bootstrap在springboot中编写简单的应用程序。我尝试从bootstrap教程做旋转木马，但没有什么对我有用，旋转木马正在显示，但我无法更改幻灯片。

依赖条件：

    <dependency>
        <groupId>org.webjars</groupId>
        <artifactId>webjars-locator</artifactId>
        <version>0.32</version>
    </dependency>
    <dependency>
        <groupId>org.webjars</groupId>
        <artifactId>bootstrap</artifactId>
        <version>3.3.7</version>
    </dependency>
    <dependency>
        <groupId>org.webjars</groupId>
        <artifactId>jquery</artifactId>
        <version>3.2.1</version>
    </dependency>

的index.html：

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:tiles="http://www.thymeleaf.org">
<!--  -->
<!--  -->
<head>
    <meta charset="utf-8" />
    <title>System Zarządzający Wnioskami Urlopowymi</title>
    <link rel="stylesheet" href="/webjars/bootstrap/3.3.7/css/bootstrap.min.css"></link>
    <script src="/webjars/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="/webjars/jquery/3.2.1/jquery.min.js"></script>
    <script>
        $('.carousel').carousel()
    </script>
</head>
<!--  -->
<!--  -->
<header>
    <!-- Navbar  -->
    <nav class="navbar navbar-inverse">
        <div class="container-fluid">
            <div class="navbar-header">
                <img src="img/base/logo.png" class="img-responsive" alt="logo"></img>
            </div> 
            <ul class="nav navbar-nav">
                <li class="active">
                    <a href="/index.html"><font size="4">Strona Główna</font></a>
                </li>
                <li class="active">
                    <a href="/contact.html"><font size="4">Kontakt</font></a>
                </li>
            </ul>
            <ul class="nav navbar-nav navbar-right">
                <li>
                    <a href="/login.html">
                        <font size="4"><span class="glyphicon glyphicon-log-in"></span>  Zaloguj się!</font>
                    </a>
                </li>
            </ul>
        </div>
    </nav>
    <!-- /Navbar -->
</header>
<!--  -->
<!--  -->
<body>


    <div class="jumbotron">
        <h1 class="display-4">Hello, world!</h1>
        <p class="lead">This is a simple hero unit, a simple
            jumbotron-style component for calling extra attention to featured
            content or information.</p>
        <hr class="my-4"></hr>
        <p>It uses utility classes for typography and spacing to space
            content out within the larger container.</p>
        <p class="lead">
            <a class="btn btn-primary btn-lg" href="#" role="button">Learn
                more</a>
        </p>
    </div>




    <div id="carousel" 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://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQuGU91BKoHbBa9bry8Go-TTW9t263vcG9aqzaIwrBfNtWanOeq9Q"
                    alt="Chania"></img>
                <div class="carousel-caption">
                    <h3>Los Angeles</h3>
                    <p>LA is always so much fun!</p>
                </div>
            </div>

            <div class="item">
                <img
                    src="https://media.eurekalert.org/multimedia_prod/pub/rel/156223_rel.jpg"
                    alt="Chicago"></img>
                <div class="carousel-caption">
                    <h3>Chicago</h3>
                    <p>Thank you, Chicago!</p>
                </div>
            </div>

            <div class="item">
                <img
                    src="https://res.cloudinary.com/demo/image/upload/w_200,h_200,c_crop,g_auto/fat_cat.jpg"
                    alt="New York"></img>
                <div class="carousel-caption">
                    <h3>New York</h3>
                    <p>We love the Big Apple!</p>
                </div>
            </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>






</body>
<!--  -->
<!--  -->
</html>

这是结果：

为什么我无法将幻灯片更改为其他图片，这个轮播是如此之大？我不知道出了什么问题，我从这里尝试了一些解决方案，但是没有用，当我尝试示例时，bootstrap中的所有组件都有效，但是这个没有

Answer 1

试试这个：

＆＃13;

<!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.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <script>
  $('.carousel').carousel()
  </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://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQuGU91BKoHbBa9bry8Go-TTW9t263vcG9aqzaIwrBfNtWanOeq9Q" alt="Los Angeles" style="width:100%;">
      </div>

      <div class="item">
        <img src="https://media.eurekalert.org/multimedia_prod/pub/rel/156223_rel.jpg" alt="Chicago" style="width:100%;">
      </div>
    
      <div class="item">
        <img src="https://res.cloudinary.com/demo/image/upload/w_200,h_200,c_crop,g_auto/fat_cat.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>

＆＃13;

Answer 2

我通过一个简单的改变解决了这个问题，我不知道它是如此重要。

只需更改html文件：

<script src="/webjars/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="/webjars/jquery/3.2.1/jquery.min.js"></script>

到此：

<script src="/webjars/jquery/3.2.1/jquery.min.js"></script>
<script src="/webjars/bootstrap/3.3.7/js/bootstrap.min.js"></script>

jQuery应该是第一位的。

Springboot Bootstrap - Carousel不起作用

2 个答案: