4

我想用这样的东西改变轮播指示器：

自定义轮播指标

我的轮播指标有这个标记：

<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;
}

当我调整浏览器的大小时，轮播会适应屏幕的宽度，但指示器正在折叠。

有人可以帮助我提供有关如何在较低分辨率（如轮播图像）上制作此比例的提示吗？

谢谢！

乐：

我试过把 li 元素放在这样的地方：

 <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>

但它不起作用。

4

2 回答 2

2

它正在崩溃，因为您的轮播指示器的宽度是 320 像素。如果您还希望代码在移动设备上响应，则无法解决。您可以替换百分比而不是使用固定宽度

.carousel-indicators li{
    background: url(images/triangle.png) no-repeat;
    max-width:25%;
    max-height:15%; /*or any other percentage that would look good*/
    cursor: pointer;
    text-align:center;
}

请注意，我使用了 max-height 和 max-height ，这样我就可以保持图像的比例，这样它就不会在任何一个方向上被拉伸。

于 2013-09-22T07:41:02.403 回答
1

您可以使用媒体查询 -

@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;
    }
于 2013-04-05T22:01:03.653 回答