Twitter的引導定製的旋轉木馬指標

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

當我調整我的瀏覽器輪播適配器ts到屏幕的寬度，但指標正在崩潰。

有人可以幫助我一個提示，我怎樣才能使這個規模也像旋轉木馬圖像更低的決議呢？

謝謝！

L.E：

我試圖把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>

但它不工作。

來源

2013-04-05 agis

你可以使用媒體查詢 -

@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-05 22:01:03 Vector

我認爲這不是我正在尋找的，因爲通過這種方式我必須爲每個屏幕大小都有不同的圖像，它應該是另一種方法。 – agis 2013-04-05 22:41:53

使用相同的圖像，只是用CSS如上調整大小。可能有其他選擇，但媒體查詢是我會建議的。 – Vector 2013-04-05 22:46:38

這是正確的，但以這種方式，我仍然需要檢查每個分辨率，並查看我應該在特定分辨率下使用的圖像大小。感謝您的建議！ – agis 2013-04-05 22:52:43

它崩潰，因爲你的旋轉木馬指標的寬度爲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; 
}

請注意，我用最大高度和最大高度，這樣我可以保持圖像的比例所以它不會在任何一個方向伸出。

來源

2013-09-22 07:41:02

這段代碼適合我！我最終需要添加！重要的最大高度和最大寬度才能正常工作。我也從這篇文章中發現，可以爲活動指標添加一個自定義圖片： .carousel-indicators li.active {../ images/imagename.png background：url（../ images/imagename.png）no-repeat！important ; – Bhetzie 2015-04-13 05:11:35

Twitter的引導定製的旋轉木馬指標

回答

相關問題