为什么此页面中的 "carousel" 不起作用？
Why is "carousel" in this page not working?
我在这个页面中尝试了 Bootstrap-轮播：http://www.karsten-heimer.de/Medien_121.html
轮播不工作，它只显示两张图片中的第一张...我错了什么？
你好...
编辑：Bootstrap 应该是版本 5。
这是代码：
<p></p>
<H2 align='center'><p><a name=114></a>Wolfgang Krege - Handbuch der Weisen von Mittelerde</p></H2>
<HTML>
<HEAD>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<Title>Medium-Details Handbuch der Weisen von Mittelerde</Title>
<META NAME="author" CONTENT="Wolfgang Krege">
<META NAME="description" CONTENT="{\rtf1\ansi\ansicpg1252\deff0\deflang1031{\fonttbl{\f0\fswiss\fcharset0 MS Sans Serif;}{\f1\fswiss MS Sans Serif;}}
\viewkind4\uc1\pard\f0\fs17 Wolfgang Krege, der sich seit Jahren mit Mittelerde, mit ihrer Geographie, ihren Sprachen und Liedern besch\'e4ftigt, hat anhand der Quellen ein Handbuch zusammengestellt, welches das Wissen des Rats der Weisen - soweit es uns \'fcberliefert ist - darstellt und kommentiert.\f1\par
}
">
<META NAME="keywords" CONTENT="Wolfgang Krege, , Handbuch der Weisen von Mittelerde, 3-608-93521-5, Klett-Cotta, Bücherliste von Karsten Heimer">
<META NAME="revisit-after" CONTENT="30 days">
<META NAME="content-language" CONTENT="de">
<META NAME="copyright" CONTENT="Karsten Heimer">
</HEAD>
<BODY>
<div class="card-Group h-75">
<div class="card mb-3" Style="max-width:450px;">
<div class="card-body">
<h5 class="card-header">Buchinformationen</h5>
<ul class="List-Group List-Group-flush">
<li class="List-Group-Item">Autor: Wolfgang Krege</li>
<li class="List-Group-Item">Kategorie: </li>
<li class="List-Group-Item">Verlag: Klett-Cotta</li>
<li class="List-Group-Item">ISBN: 3-608-93521-5</li>
<li class="List-Group-Item">
<div id="carouselExampleSlidesOnly" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="Tolkien_Handbuch.jpg" class="d-block w-75" alt="Buchcover">
</div>
<div class="carousel-item">
<img src="Krege_Handbuch_Mittelerde_Back.JPG" class="d-block w-75" alt="Buchbackcover">
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
<div class="card mb-3">
<div class="card-body">
<h5 class="card-header">Leseprobe</h5>
<p></p>
<div>Wolfgang Krege, der sich seit Jahren mit Mittelerde, mit ihrer Geographie, ihren Sprachen und Liedern beschäftigt, hat anhand der Quellen ein Handbuch zusammengestellt, welches das Wissen des Rats der Weisen - soweit es uns überliefert ist - darstellt und kommentiert.</div>
</div>
</div>
</div>
<div class='container-sm'>
<a target='_blank' href=http://www.karsten-heimer.de>Zurück zur Übersicht</a>
Impressum: Karsten Heimer, 82178 Puchheim, Oskar-Maria-Graf Str. 1, Mail: kh -at- karsten-heimer.de, Datenschutz: Diese Seite verwendet keine Cookies.
</div>
</BODY>
</HTML>
我认为你包含的版本有误，通常你应该把 Javascript 脚本放在 body 标签的末尾：
<HTML>
<HEAD>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
<Title>Medium-Details Handbuch der Weisen von Mittelerde</Title>
<META NAME="author" CONTENT="Wolfgang Krege">
<META NAME="description" CONTENT="{\rtf1\ansi\ansicpg1252\deff0\deflang1031{\fonttbl{\f0\fswiss\fcharset0 MS Sans Serif;}{\f1\fswiss MS Sans Serif;}}
\viewkind4\uc1\pard\f0\fs17 Wolfgang Krege, der sich seit Jahren mit Mittelerde, mit ihrer Geographie, ihren Sprachen und Liedern besch\'e4ftigt, hat anhand der Quellen ein Handbuch zusammengestellt, welches das Wissen des Rats der Weisen - soweit es uns \'fcberliefert ist - darstellt und kommentiert.\f1\par
}
">
<META NAME="keywords" CONTENT="Wolfgang Krege, , Handbuch der Weisen von Mittelerde, 3-608-93521-5, Klett-Cotta, Bücherliste von Karsten Heimer">
<META NAME="revisit-after" CONTENT="30 days">
<META NAME="content-language" CONTENT="de">
<META NAME="copyright" CONTENT="Karsten Heimer">
</HEAD>
<BODY>
<div class="card-Group h-75">
<div class="card mb-3" Style="max-width:450px;">
<div class="card-body">
<h5 class="card-header">Buchinformationen</h5>
<ul class="List-Group List-Group-flush">
<li class="List-Group-Item">Autor: Wolfgang Krege</li>
<li class="List-Group-Item">Kategorie: </li>
<li class="List-Group-Item">Verlag: Klett-Cotta</li>
<li class="List-Group-Item">ISBN: 3-608-93521-5</li>
<li class="List-Group-Item carousel">
<!-- Bootstrap v5 carousel from bootstrap documentation -->
<div id="carouselExampleControls" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="..." class="d-block w-100" alt="First Slide">
</div>
<div class="carousel-item">
<img src="..." class="d-block w-100" alt="Second Slide">
</div>
<div class="carousel-item">
<img src="..." class="d-block w-100" alt="Third Slide">
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
</li>
</ul>
</div>
</div>
<div class="card mb-3">
<div class="card-body">
<h5 class="card-header">Leseprobe</h5>
<p></p>
<div>Wolfgang Krege, der sich seit Jahren mit Mittelerde, mit ihrer Geographie, ihren Sprachen und Liedern beschäftigt, hat anhand der Quellen ein Handbuch zusammengestellt, welches das Wissen des Rats der Weisen - soweit es uns überliefert ist - darstellt und kommentiert.</div>
</div>
</div>
</div>
<div class='container-sm'>
<a target='_blank' href=http://www.karsten-heimer.de>Zurück zur Übersicht</a>
Impressum: Karsten Heimer, 82178 Puchheim, Oskar-Maria-Graf Str. 1, Mail: kh -at- karsten-heimer.de, Datenschutz: Diese Seite verwendet keine Cookies.
</div>
<!-- JS Imports go here, and I've only included the bundle which contains all the required JS for bootstrap 5 to work -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>
</BODY>
</HTML>
这里有一个 fiddle 使用最新版本的 Bootstrap:
我在这个页面中尝试了 Bootstrap-轮播：http://www.karsten-heimer.de/Medien_121.html
轮播不工作，它只显示两张图片中的第一张...我错了什么？
你好...
编辑：Bootstrap 应该是版本 5。
这是代码：
<p></p>
<H2 align='center'><p><a name=114></a>Wolfgang Krege - Handbuch der Weisen von Mittelerde</p></H2>
<HTML>
<HEAD>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<Title>Medium-Details Handbuch der Weisen von Mittelerde</Title>
<META NAME="author" CONTENT="Wolfgang Krege">
<META NAME="description" CONTENT="{\rtf1\ansi\ansicpg1252\deff0\deflang1031{\fonttbl{\f0\fswiss\fcharset0 MS Sans Serif;}{\f1\fswiss MS Sans Serif;}}
\viewkind4\uc1\pard\f0\fs17 Wolfgang Krege, der sich seit Jahren mit Mittelerde, mit ihrer Geographie, ihren Sprachen und Liedern besch\'e4ftigt, hat anhand der Quellen ein Handbuch zusammengestellt, welches das Wissen des Rats der Weisen - soweit es uns \'fcberliefert ist - darstellt und kommentiert.\f1\par
}
">
<META NAME="keywords" CONTENT="Wolfgang Krege, , Handbuch der Weisen von Mittelerde, 3-608-93521-5, Klett-Cotta, Bücherliste von Karsten Heimer">
<META NAME="revisit-after" CONTENT="30 days">
<META NAME="content-language" CONTENT="de">
<META NAME="copyright" CONTENT="Karsten Heimer">
</HEAD>
<BODY>
<div class="card-Group h-75">
<div class="card mb-3" Style="max-width:450px;">
<div class="card-body">
<h5 class="card-header">Buchinformationen</h5>
<ul class="List-Group List-Group-flush">
<li class="List-Group-Item">Autor: Wolfgang Krege</li>
<li class="List-Group-Item">Kategorie: </li>
<li class="List-Group-Item">Verlag: Klett-Cotta</li>
<li class="List-Group-Item">ISBN: 3-608-93521-5</li>
<li class="List-Group-Item">
<div id="carouselExampleSlidesOnly" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="Tolkien_Handbuch.jpg" class="d-block w-75" alt="Buchcover">
</div>
<div class="carousel-item">
<img src="Krege_Handbuch_Mittelerde_Back.JPG" class="d-block w-75" alt="Buchbackcover">
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
<div class="card mb-3">
<div class="card-body">
<h5 class="card-header">Leseprobe</h5>
<p></p>
<div>Wolfgang Krege, der sich seit Jahren mit Mittelerde, mit ihrer Geographie, ihren Sprachen und Liedern beschäftigt, hat anhand der Quellen ein Handbuch zusammengestellt, welches das Wissen des Rats der Weisen - soweit es uns überliefert ist - darstellt und kommentiert.</div>
</div>
</div>
</div>
<div class='container-sm'>
<a target='_blank' href=http://www.karsten-heimer.de>Zurück zur Übersicht</a>
Impressum: Karsten Heimer, 82178 Puchheim, Oskar-Maria-Graf Str. 1, Mail: kh -at- karsten-heimer.de, Datenschutz: Diese Seite verwendet keine Cookies.
</div>
</BODY>
</HTML>
我认为你包含的版本有误，通常你应该把 Javascript 脚本放在 body 标签的末尾：
<HTML>
<HEAD>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
<Title>Medium-Details Handbuch der Weisen von Mittelerde</Title>
<META NAME="author" CONTENT="Wolfgang Krege">
<META NAME="description" CONTENT="{\rtf1\ansi\ansicpg1252\deff0\deflang1031{\fonttbl{\f0\fswiss\fcharset0 MS Sans Serif;}{\f1\fswiss MS Sans Serif;}}
\viewkind4\uc1\pard\f0\fs17 Wolfgang Krege, der sich seit Jahren mit Mittelerde, mit ihrer Geographie, ihren Sprachen und Liedern besch\'e4ftigt, hat anhand der Quellen ein Handbuch zusammengestellt, welches das Wissen des Rats der Weisen - soweit es uns \'fcberliefert ist - darstellt und kommentiert.\f1\par
}
">
<META NAME="keywords" CONTENT="Wolfgang Krege, , Handbuch der Weisen von Mittelerde, 3-608-93521-5, Klett-Cotta, Bücherliste von Karsten Heimer">
<META NAME="revisit-after" CONTENT="30 days">
<META NAME="content-language" CONTENT="de">
<META NAME="copyright" CONTENT="Karsten Heimer">
</HEAD>
<BODY>
<div class="card-Group h-75">
<div class="card mb-3" Style="max-width:450px;">
<div class="card-body">
<h5 class="card-header">Buchinformationen</h5>
<ul class="List-Group List-Group-flush">
<li class="List-Group-Item">Autor: Wolfgang Krege</li>
<li class="List-Group-Item">Kategorie: </li>
<li class="List-Group-Item">Verlag: Klett-Cotta</li>
<li class="List-Group-Item">ISBN: 3-608-93521-5</li>
<li class="List-Group-Item carousel">
<!-- Bootstrap v5 carousel from bootstrap documentation -->
<div id="carouselExampleControls" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="..." class="d-block w-100" alt="First Slide">
</div>
<div class="carousel-item">
<img src="..." class="d-block w-100" alt="Second Slide">
</div>
<div class="carousel-item">
<img src="..." class="d-block w-100" alt="Third Slide">
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
</li>
</ul>
</div>
</div>
<div class="card mb-3">
<div class="card-body">
<h5 class="card-header">Leseprobe</h5>
<p></p>
<div>Wolfgang Krege, der sich seit Jahren mit Mittelerde, mit ihrer Geographie, ihren Sprachen und Liedern beschäftigt, hat anhand der Quellen ein Handbuch zusammengestellt, welches das Wissen des Rats der Weisen - soweit es uns überliefert ist - darstellt und kommentiert.</div>
</div>
</div>
</div>
<div class='container-sm'>
<a target='_blank' href=http://www.karsten-heimer.de>Zurück zur Übersicht</a>
Impressum: Karsten Heimer, 82178 Puchheim, Oskar-Maria-Graf Str. 1, Mail: kh -at- karsten-heimer.de, Datenschutz: Diese Seite verwendet keine Cookies.
</div>
<!-- JS Imports go here, and I've only included the bundle which contains all the required JS for bootstrap 5 to work -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>
</BODY>
</HTML>
这里有一个 fiddle 使用最新版本的 Bootstrap: