現在表示されているスライドにクラスを追加したいのですが、jqueryについてあまり知識がなく、次のコードで試しています。
$(document).ready(function(){
$('#slider1').bxSlider({
pager: 'true'
});
$(currentSlide).addClass('active-slide');
return false;
});
var slider=$('#slider1').bxSlider({
pager: 'true',
onBeforeSlide: function(currentSlide, totalSlides, currentSlideHtmlObject){
$('.pager').removeClass('active-slide');
$(currentSlideHtmlObject).addClass('active-slide');
// $('#sddf').html('<p class="check">Slide index ' + currentSlide + ' of ' + totalSlides + ' total slides has completed.');
}
});
最初に表示されるスライドにクラスを追加するには、onSliderLoadを呼び出す必要があります。次に、onSlideAfter呼び出しを使用して、アクティブスライドクラスの追加と削除を続けます。
onSlideAfter: function (currentSlideNumber, totalSlideQty, currentSlideHtmlObject) {
$('.active-slide').removeClass('active-slide');
$('.bxslider>li').eq(currentSlideHtmlObject + 1).addClass('active-slide')
},
onSliderLoad: function () {
$('.bxslider>li').eq(1).addClass('active-slide')
},
ここにあります:
$('#slider1 ul').bxSlider({
pager: 'true',
onSliderLoad: function(currentIndex) {
$('#slider1').find('.bx-viewport').find('ul').children().eq(currentIndex + 1).addClass('active-slide');
},
onSlideBefore: function($slideElement){
$('#slider1').find('.bx-viewport').find('ul').children().removeClass('active-slide');
$slideElement.addClass('active-slide');
}
});