php - BXSlider, how can I change CSS or color of a DIV depending on slide visible -

php - BXSlider, how can I change CSS or color of a DIV depending on slide visible -

i have bxslider thats pretty standard, v4.0. have css creating total screen effect in background, , big div on top. want div backgeround color alter each slide, color match slide photo.

see example there way in function?

current function:

$(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 has extensive , documented callback options can utilize when instantiate slider:

http://bxslider.com/options#onsliderload

you'll want onslideafter, when create slider, it'll like

$('.bxslider').bxslider({ ... onslideafter: function (elem) { ... code here ... } });

in order alter color within function, include hex code want associated each image in html5 info attribute.

<img src="img1.jpg" data-color="#ff0000" />

then utilize first argument passed bx's onslideafter (which jquery element current slide) color , apply background.

function (elem) { $('#background-div').css('background-color', elem.data('color')); }

php jquery bxslider