Bootstrap旋轉木馬指示器1張幻燈片的顏色變化

我正在使用默認引導程序傳送帶。但其中一張幻燈片有白色背景，因此幻燈片上的旋轉木馬指示器消失。我有Javascript/jQuery解決方案，但它似乎有點慢/笨重。將不勝感激，任何幫助改善腳本或替代解決方案，將不勝感激。Bootstrap旋轉木馬指示器1張幻燈片的顏色變化

$('#carousel-generic').on('slid.bs.carousel', function (evt) { 
    var elem = $(this).find('.carousel-indicators li'); 
    var active = $(this).find('.carousel-indicators .active'); 
    if(active.index() == 2) { 
     elem.css('border-color', 'grey'); 
     elem.css('background-color', 'rgba(0,0,0,0)'); 
     active.css('background-color', 'grey'); 
    } else { 
     elem.css('border-color', 'white'); 
     elem.css('background-color', 'rgba(0,0,0,0)'); 
     active.css('background-color', 'white'); 
    } 
})

來源

2015-06-04 blurb

如果此代碼工作，你問如何改進它，你應該張貼在[代碼審查]這個問題（http://codereview.stackexchange.com/tour ）。 –

既然你已經知道你需要改變（因此你index()）其中之一，那麼就創建CSS樣式它

.carousel .carousel-indicators li { 
    // normal styles 
} 
.carousel .carousel-indicators li.active { 
    // active styles 
} 
.carousel .carousel-indicators li:nth-of-type(3).active { 
    // index() is 0 based index, and nth-of-type starts at 1 
    // special styles for that one instance 
}

來源

2015-06-04 13:08:02

如果它有效，那麼這應該是答案。 –

感謝您的回答。是的，我更喜歡css解決方案。但我不認爲有一個CSS解決方案。我的CSS不是很好。但正如我現在看到的那樣，一個額外的類需要被添加到父類.carousel-indicator，當它的孩子第二個li變成活動的時候。我不認爲這可以在CSS中完成。也就是說，腳本解決方案並不壞。我想我會保留它。並關閉這個問題。謝謝你的時間Rob。 – blurb

@blurb - 這是一個CSS解決方案。你不必添加一個類就可以使用'n-type-type'選擇器 –

設置background-color:"color"到.carousel，.carousel-indicators li，可以正常工作。

來源

2016-05-04 11:10:08

一個簡單的解決方案

.carousel-indicators li { 
    background-color: #669966; 
} 

.carousel-indicators .active { 
    background-color: #FF7600; 
}

來源

2017-04-01 21:44:38 Butch

Bootstrap旋轉木馬指示器1張幻燈片的顏色變化

回答

相關問題