我正在做一个元素,需要根据用户的选择动态显示图标。这些图标基本上是字形,下面有一个 2 个词的标题。简而言之,有一个
<div class="col-md-9"> //main container to hold the slider
<i class="some-icon-name"></i>
<div class="col-md-3">
Some title
</div>
--
<i class="some-icon-name"></i>
<div class="col-md-3">
Some title
</div>
--
</div>
我希望这些图标及其各自的 div 显示为 slider /旋转木马。我尝试使用猫头鹰旋转木马并用它替换 img
。没用。我正在使用 Bootstrap 和 Jquery。我尝试想出一个自定义解决方案,但没有成功。
最佳答案
不确定这是否是您要找的
<div id="wrapper">
<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">
<span class="glyphicon glyphicon-search" aria-hidden="true"></span>
<span class="caption">Search</span>
</div>
<div class="item">
<span class="glyphicon glyphicon-star" aria-hidden="true"></span>
<span class="caption">Star</span>
</div>
<div class="item">
<span class="glyphicon glyphicon-ice-lolly" aria-hidden="true"></span>
<span class="caption">Ice lolly</span>
</div>
<div class="item">
<span class="glyphicon glyphicon-apple" aria-hidden="true"></span>
<span class="caption">Apple</span>
</div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
CSS
#wrapper {
position:relative;
overflow:hidden;
width:50%
height: 100%;
margin:0px auto;
padding:0;
background-color:Grey;
margin-left:150px;
margin-right:150px
}
.glyphicon {
font-size: 100px;
}
.caption {
display: block;
}
关于javascript - 带有图标和 div 而不是图像的旋转木马/ slider ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29764598/