帶有兩個轉盤指示器的自舉轉盤

基本上我試圖做的是，我有一個帶8個轉盤的Bootstrap轉盤。我使用2個轉盤指示器。帶有兩個轉盤指示器的自舉轉盤

這是我的第一個指標它很好地工作.active類

<ol class="rightci carousel-indicators"> 
    <li data-target="#carousel-example-generic" data-slide-to="0" ></li> 
</ol>

這是我的第二個指標是工作fine.when我點擊鏈接輪播幻燈片完全改變，但.active類劑量不會改變，而自動上第一個指標.active更改正常。

<div class="left leftci carousel-indicators"> 
<a href=""><span class="leftindicators active" data-target="#carousel-example-generic" data-slide-to="0">slide1</span></a> 
</div>

幫我一下吧

來源

2016-07-29 parish

你有8張幻燈片，只有2個指標。你能否清楚地解釋你的問題？ –

第一指標與'.active'類一致。例如，當＃第一張幻燈片滑動到＃第二張幻燈片時，並且如同...第一個指示器的「主動」類改變了...問題與第二個指示器.....它不會按照幻燈片 – parish

當其圖像處於活動狀態時，指示器具有「活動」類別！你需要8個指標和有效的引導標記爲他們 –

我認爲你需要編寫一些自定義的js引導還沒有這個功能默認情況下，所以你需要使自己的carousel-indicators

CSS

.carousel-indicators2 { 
    position: absolute; 
    top: 10px; 
    left: 50%; 
    z-index: 15; 
    width: 60%; 
    padding-left: 0; 
    margin-left: -30%; 
    text-align: center; 
    list-style: none; 
} 

.carousel-indicators2 li { 
    display: inline-block; 
    width: 10px; 
    height: 10px; 
    margin: 1px; 
    text-indent: -999px; 
    cursor: pointer; 
    background-color: #000\9; 
    background-color: rgba(0, 0, 0, 0); 
    border: 1px solid #fff; 
    border-radius: 10px; 
} 
.carousel-indicators2 .active { 
    width: 12px; 
    height: 12px; 
    margin: 0; 
    background-color: #fff; 
}

$('.carousel').on('slid.bs.carousel', function() { 
    $(".carousel-indicators2 li").removeClass("active"); 
    indicators = $(".carousel-indicators li.active").data("slide-to"); 
    a = $(".carousel-indicators2").find("[data-slide-to='" + indicators + "']").addClass("active"); 
    console.log(indicators); 

})

Fiddle

來源

2016-07-29 10:31:43

Thx兄弟它工作正常！ – parish

帶有兩個轉盤指示器的自舉轉盤

回答

相關問題