![轮播]( "轮播")
本文介绍了twitter bootstrap 自定义轮播指标的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我想用这样的东西来改变轮播指示器:
我的轮播指示器有这个标记:
<li data-target="#ShowCarousel-03" data-slide-to="0" class="active"><h4>IMAGE1</h4><br/><h5>字幕</h5><br/><span>+</span><li data-target="#ShowCarousel-03" data-slide-to="0" class="active"><h4>IMAGE2</h4><br/><h5>字幕</h5><br/><span>+</span><li data-target="#ShowCarousel-03" data-slide-to="2"><h4>IMAGE3</h4><br/><h5>字幕</h5><br/><span>+</span><li data-target="#ShowCarousel-03" data-slide-to="0" class="active"><h4>IMAGE4</h4><br/><h5>字幕</h5><br/><span>+</span></ol>
CSS:
.carousel-indicators {位置:绝对；顶部:0px；左:0px；z-索引:5；边距:0；列表样式:无；}.carousel-indicators li{背景: url(images/triangle.png) 不重复；宽度:320px；高度:176px；光标:指针；文字对齐:居中；}
当我调整浏览器大小时，轮播会适应屏幕的宽度，但指示器会折叠.
有人可以帮助我提示如何在较低分辨率下(如轮播图像)制作此比例尺?
谢谢！
李:
我尝试像这样放置 li 元素:
<div class="span3><li data-target="#ShowCarousel-03" data-slide-to="0" class="active"><h4>IMAGE1</h4><br/><h5>字幕</h5><br/><span>+</span><div class="span3><li data-target="#ShowCarousel-03" data-slide-to="0" class="active"><h4>IMAGE1</h4><br/><h5>字幕</h5><br/><span>+</span><div class="span3><li data-target="#ShowCarousel-03" data-slide-to="0" class="active"><h4>IMAGE1</h4><br/><h5>字幕</h5><br/><span>+</span>
但它不起作用.
解决方案
你可以使用媒体查询 -
@media screen and (max-width:480px) {.carousel-indicators li{背景: url(images/triangle.png) 不重复；背景尺寸:120px 60px;宽度:120px；高度:60px；光标:指针；文字对齐:居中；}
I want to change the carousel indicators with something like this:
I have this markup for my carousel indicators:
<ol class="carousel-indicators">
<li data-target="#ShowCarousel-03" data-slide-to="0" class="active">
<h4>IMAGE1</h4><br/><h5>subtitle</h5><br/><span>+</span>
</li>
<li data-target="#ShowCarousel-03" data-slide-to="0" class="active">
<h4>IMAGE2</h4><br/><h5>subtitle</h5><br/><span>+</span>
</li>
<li data-target="#ShowCarousel-03" data-slide-to="2">
<h4>IMAGE3</h4><br/><h5>subtitle</h5><br/><span>+</span>
</li>
<li data-target="#ShowCarousel-03" data-slide-to="0" class="active">
<h4>IMAGE4</h4><br/><h5>subtitle</h5><br/><span>+</span>
</li>
</ol>
CSS:
.carousel-indicators {
position: absolute;
top: 0px;
left: 0px;
z-index: 5;
margin: 0;
list-style: none;
}
.carousel-indicators li{
background: url(images/triangle.png) no-repeat;
width:320px;
height:176px;
cursor: pointer;
text-align:center;
}
When I resize my browser the carousel adapts to the width of the screen but the indicators are collapsing.
Can someone help me with a tip on how can I make this scale also on lower resolutions like the carousel images does?
Thank you!
L.E:
I've tried to put li elements like this:
<div class="row-fluid">
<div class="span3>
<li data-target="#ShowCarousel-03" data-slide-to="0" class="active">
<h4>IMAGE1</h4><br/><h5>subtitle</h5><br/><span>+</span>
</li>
<div class="span3>
<li data-target="#ShowCarousel-03" data-slide-to="0" class="active">
<h4>IMAGE1</h4><br/><h5>subtitle</h5><br/><span>+</span>
</li>
<div class="span3>
<li data-target="#ShowCarousel-03" data-slide-to="0" class="active">
<h4>IMAGE1</h4><br/><h5>subtitle</h5><br/><span>+</span>
</li>
</div>
</div>
But it's not working.
解决方案
You could use media query -
@media screen and (max-width:480px) {
.carousel-indicators li{
background: url(images/triangle.png) no-repeat;
background-size:120px 60px;
width:120px;
height:60px;
cursor: pointer;
text-align:center;
}
这篇关于twitter bootstrap 自定义轮播指标的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！