Bootstrap 4旋转木马组件问题
Bootstrap 4 Carousel component Issue
我正在尝试将Carousel Bootstrap 4实现到一个个人项目中。我对HTML5、CSS3、Bootstrap 4和JS有基本的了解。我看了一些关于如何使用旋转木马组件的讨论和教程,但无法在浏览器中获得正确的输出。我使用chrome和firefox,在这两种浏览器中都有相同的问题。我已经检查了(链接)和(脚本)的路径,我甚至不得不将(img data src="#")更改为(img src="#),这样图像才能正确加载到浏览器中。这些图像叠在一起,不知道如何纠正这个问题。我直接从Bootstrap网站复制代码。这是我第一次进入社区,也是我的第一个问题。只是对这个组件感到有点沮丧。
提前感谢!
浏览器中问题的图像示例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Carousel-testing!</title>
<link rel="stylesheet" href="assets'css'bootstrap.css">
<link rel="stylesheet" href="assets'css'bootstrap-theme.css">
<link rel="stylesheet" href="assets'css'app.css">
<link rel="stylesheet" href="assets'css'animate.css">
<script type="text/javascript" src="assets'js'jquery.js"></script>
<script type="text/javascript" src="assets'js'bootstrap.js"></script>
<script type="text/javascript" src="assets'js'app.js"></script>
</head>
<nav>
</nav>
<section id="carousel">
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="carousel-item active">
<img src="assets'images'2736779-casino-roulette-in-water-and-fire-isolated-on-black-background.jpg" alt="First slide">
</div>
<div class="carousel-item">
<img src="assets'images'DealerBust.jpg" alt="Second slide">
</div>
<div class="carousel-item">
<img src="assets'images'FH_Gaming_Main-new.jpg" alt="Third slide">
</div>
</div>
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="icon-prev" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="icon-next" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</section>
<body>
</body>
</html>
您需要将HTML放入<body>
标记中,以便正确呈现。
<body>
<nav>
</nav>
<section id="carousel">
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="carousel-item active">
<img src="assets'images'2736779-casino-roulette-in-water-and-fire-isolated-on-black-background.jpg" alt="First slide">
</div>
<div class="carousel-item">
<img src="assets'images'DealerBust.jpg" alt="Second slide">
</div>
<div class="carousel-item">
<img src="assets'images'FH_Gaming_Main-new.jpg" alt="Third slide">
</div>
</div>
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="icon-prev" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="icon-next" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</section>
</body>
</html>
将类"carousel item"更改为"item"。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Carousel-testing!</title>
<link rel="stylesheet" href="assets'css'bootstrap.css">
<link rel="stylesheet" href="assets'css'bootstrap-theme.css">
<link rel="stylesheet" href="assets'css'app.css">
<link rel="stylesheet" href="assets'css'animate.css">
<script type="text/javascript" src="assets'js'jquery.js"></script>
<script type="text/javascript" src="assets'js'bootstrap.js"></script>
<script type="text/javascript" src="assets'js'app.js"></script>
</head>
<nav>
</nav>
<section id="carousel">
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="assets'images'2736779-casino-roulette-in-water-and-fire-isolated-on-black-background.jpg" alt="First slide">
</div>
<div class="item">
<img src="assets'images'DealerBust.jpg" alt="Second slide">
</div>
<div class="item">
<img src="assets'images'FH_Gaming_Main-new.jpg" alt="Third slide">
</div>
</div>
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="icon-prev" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="icon-next" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</section>
相关文章:
- 组件生命周期问题/无法处理未定义的问题
- 使用PrimeNG组件时出现问题(未找到指令注释)
- Ember组件'jQuery可排序的模板问题
- React.js简单组件组成问题
- 追加新web组件时出现线程问题
- Bootstrap 4旋转木马组件问题
- 反应组件加载问题
- 如何在回调函数的 Angular 1.5 组件中处理这个问题
- ExtJs 扩展组件问题
- 如何使 ember 组件从服务器获取数据.将 AJAX 调用放在组件中似乎不是处理此问题的好做法
- ReactJS - 渲染正确组件的问题
- 寻找 Web 组件来解决这个问题(可能是 SELECT 或不知道)
- JavaScript-呈现仪表组件时出现问题
- React.js显示了悬停问题组件的一部分
- 在viewModel之前注册淘汰组件的问题
- react router问题未捕获错误:不变冲突:元素类型无效:应为字符串(用于内置组件)
- ExtJS 4 -关于MVC架构的问题,使用MVC进行组件开发
- React Native Tabbar iOS绑定问题[期望一个组件类,得到object object]
- 事件没有触发,React组件之间的通信问题
- 嵌套聚合物组件内容问题