BXSlider, как я могу изменить CSS или цвет DIV в зависимости от видимого слайда
У меня есть bxslider, который довольно стандартный, v4.0. У меня есть CSS, создающий полноэкранный эффект в фоновом режиме, и большой DIV сверху. Я хочу, чтобы цвет фона DIV менялся с каждым слайдом, чтобы цвет соответствовал фотографии слайда.
См пример
Есть ли способ сделать это в функции?
Текущая функция:
$(document).ready(function(){
$('.bxslider').bxSlider({
mode: 'horizontal',
auto:true,
pager:false,
nextSelector: '#bx-next',
prevSelector: '#bx-prev',
nextText: '<img src="btn_slider_next.png" />',
prevText: '<img src="btn_slider_prev.png" />',
});
});
Решение
BXSlider имеет несколько очень обширных и хорошо документированных опций обратного вызова, которые вы можете использовать при создании экземпляра слайдера:
http://bxslider.com/options#onSliderLoad
Вы, вероятно, захотите onSlideAfter, поэтому при создании слайдера он будет выглядеть
$('.bxslider').bxSlider({
...
onSlideAfter: function (elem) { ... YOUR CODE HERE ... }
});
Чтобы изменить цвет в этой функции, вы можете включить шестнадцатеричный код, который вы хотите связать с каждым изображением, в атрибут данных HTML5.
<img src="img1.jpg" data-color="#ff0000" />
Затем используйте первый аргумент, переданный в onSlideAfter BX (который является элементом jQuery для текущего слайда), чтобы получить этот цвет и применить его к фону.
function (elem) {
$('#background-div').css('background-color', elem.data('color'));
}
Другие решения
Других решений пока нет …