【问题标题】：Bootstrap carousel without arrows and auto slide没有箭头和自动滑动的引导轮播
【发布时间】：2017-03-26 08:45:12
【问题描述】：
我正在尝试获得一个 自动幻灯片轮播，其中包含 2 张激活/显示图像且没有箭头，就像在此页面上一样（右侧的品牌徽标，如果您向下滚动几像素） ：http://www.videoboost.de/#anfrage
很遗憾，我找不到解决方案。那是我当前的代码，当然它不起作用，因为数据目标是用于按下箭头。你能帮助我或提供任何建议吗？非常感谢！
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head> <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>
<li data-target="#myCarousel" data-slide-to="3"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="http://www.videoboost.de/wp-content/uploads/2016/10/bmw-logo.png" alt="a" height="71">
</div>
<div class="item">
<img src="http://www.videoboost.de/wp-content/uploads/2016/09/JPmorgan.png" alt="b" height="71">
</div>
<div class="item">
<img src="http://www.videoboost.de/wp-content/uploads/2016/10/rheinland-logo.png" alt="c" height="71">
</div>
<div class="item">
<img src="http://www.videoboost.de/wp-content/uploads/2016/09/BarmerGEK.png" alt="d" height="71">
</div>
</div>
</div>
【问题讨论】：
标签：
twitter-bootstrap
slider
carousel
【解决方案1】：
所以你的代码有一些问题--
- 你忘了关闭
head标签。
- 您没有添加
jquery 和 bootstrap js 这些是使轮播工作所需的库。
-
要在轮播幻灯片中显示两个图像，请使用引导响应类。通过以下方式--
<div class="row">
<div class="col-xs-6">
<img src="http://www.videoboost.de/wp-content/uploads/2016/10/bmw-logo.png" alt="a" height="71">
</div>
<div class="col-xs-6">
<img src="http://www.videoboost.de/wp-content/uploads/2016/10/bmw-logo.png" alt="a" height="71">
</div>
</div>
工作片段
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head> <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>
<li data-target="#myCarousel" data-slide-to="3"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<div class="row">
<div class="col-xs-6">
<img src="http://www.videoboost.de/wp-content/uploads/2016/10/bmw-logo.png" alt="a" height="71">
</div>
<div class="col-xs-6">
<img src="http://www.videoboost.de/wp-content/uploads/2016/10/bmw-logo.png" alt="a" height="71">
</div>
</div>
</div>
<div class="item">
<div class="row">
<div class="col-xs-6">
<img src="http://www.videoboost.de/wp-content/uploads/2016/09/JPmorgan.png" alt="b" height="71">
</div>
<div class="col-xs-6">
<img src="http://www.videoboost.de/wp-content/uploads/2016/10/bmw-logo.png" alt="a" height="71">
</div>
</div>
</div>
<div class="item">
<div class="row">
<div class="col-xs-6">
<img src="http://www.videoboost.de/wp-content/uploads/2016/10/rheinland-logo.png" alt="c" height="71">
</div>
<div class="col-xs-6">
<img src="http://www.videoboost.de/wp-content/uploads/2016/10/bmw-logo.png" alt="a" height="71">
</div>
</div>
</div>
<div class="item">
<div class="row">
<div class="col-xs-6">
<img src="http://www.videoboost.de/wp-content/uploads/2016/09/BarmerGEK.png" alt="d" height="71">
</div>
<div class="col-xs-6">
<img src="http://www.videoboost.de/wp-content/uploads/2016/09/BarmerGEK.png" alt="d" height="71">
</div>
</div>
</div>
</div>
</div>
希望这会有所帮助！