Springboot Bootstrap-輪播無法正常工作
[英]Springboot Bootstrap - Carousel doesn't work
問題描述
我正在使用引導程序在springboot中編寫簡單的應用程序。 我正在嘗試通過自舉教程制作輪播，但對我來說沒有任何用，輪播正在顯示，但我無法更改幻燈片。
依賴條件：
<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>
這是結果：
為什么我無法將幻燈片更改為其他圖片，而該輪播卻是如此之大？ 我不知道出什么問題了，我從這里嘗試了一些解決方案，但是不起作用，當我嘗試示例時，引導程序中的所有組件都可以工作，但是這個不
2 個解決方案
解決方案1
1 2018-01-06 19:46:28
嘗試這個：
<!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>
解決方案2
0 已采納 2018-01-10 17:33:59
我通過一個簡單的更改就解決了這個問題，但我不知道它是如此重要。
只需在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應該是第一個。
細絲組響應式旋轉木馬不適用於Twitter Bootstrap
[英]Filament group responsive carousel doesn't work with twitter bootstrap
在 Bootstrap 4 Carousel 單擊下一步時，第一張幻燈片計數不起作用
[英]First slide count doesn't work on clicking next for Bootstrap 4 Carousel
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.