twitter bootstrap自定义轮播指标

问题描述

我想通过以下方式更改轮播指标:

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?

谢谢！

L.E:

我试图将li元素放入这样:

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>

但是它不起作用.

推荐答案

您可以使用媒体查询-

@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自定义轮播指标的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！