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

カルーセル インジケーターの幅が 320px であるため、折りたたまれています。コードをモバイルでもレスポンシブにしたい場合は、修正できません。固定幅を使用する代わりにパーセンテージを代用できます

.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 に答える