html - 为什么这个引导轮播不起作用?
问题描述
图像是我看到的试图让这个旋转木马工作,最初有什么问题吗?我已经尝试过 CSS 并查看了其他问题以了解它为什么不起作用但我看不到错误。也许新鲜的眼睛会。
错误:照片一张一张地显示,不是“轮播”风格。看起来我只是将图片拍到代码上,根本没有轮播。
这是我的代码:
<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="couple-walking-dog-in-front-of-well_orig.jpg" />
</div>
<div class="item">
<img src="th.jpg" />
</div>
<div class="item">
<img src="victory-girl_orig.jpg" />
</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>
解决方案
您的类名中有一些错误。item
应该是carousel-item
,left carousel control
应该是carousel-control-prev
,还有更多。
修复这些应该会给你想要的结果:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<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="carousel-item active">
<img class="d-block w-100" src="https://via.placeholder.com/350x150" />
</div>
<div class="carousel-item">
<img class="d-block w-100" src="https://via.placeholder.com/350x150" />
</div>
<div class="carousel-item">
<img class="d-block w-100" src="https://via.placeholder.com/350x150" />
</div>
</div>
<!-- Left and right controls -->
<a class="carousel-control-prev" href="#myCarousel" 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="#myCarousel" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
推荐阅读
- django - AWS Elasticbeanstalk Django - 应用程序部署期间出错
- avro - 在 Avro 中,为什么我们必须为正确的 Enum 类型指定一个“null”字符串?
- java - 如何将具有集合作为参数的对象映射到单个对象 - SpringBoot
- flutter - 防止自动更改 DropDownButton 值
- reactjs - Metirial-UI 自定义分页器动态 componentProps
- solana - 为什么它可以获得新生成地址的关联帐户?
- flutter - Flutter 行文本溢出
- python - 尝试在 Python Google Webrisk 中发布 API 命令但无法确定身份验证
- python - 根据距离对两个 GeoDataFrames 进行空间连接
- javascript - OwlCarousel:居中/活动元素未可靠设置