У меня есть пользовательские нумерации страниц, которые являются файлами изображений. Обычно они остаются серыми, но после щелчка один из них меняет цвет на зеленый.
Я бы хотел, чтобы 2 вещи происходили , когда я нажимаю кнопку «Далее» (элемент управления) на моем bx-слайдере.
- слайд перемещается на следующую страницу.
- соответствующий значок пейджера отображаемого слайда превращается в зеленый , в то время как другие значки остаются серыми.
Связать элементы управления с помощью bx-slide было легко, но я не могу связать пользовательскую нумерацию страниц с элементами управления. Пользовательский пейджер работает хорошо, когда на него нажимают, и нумерация страниц работает хорошо, когда на него нажимают. Но я не могу соединить эти два устройства для одновременной работы.
Я пробовал 2 кода jQuery для решения этой задачи, но ни один не работает. Пожалуйста, смотрите ниже.
jQuery # 1
Здесь происходит событие click . После нажатия кнопки «Далее» я хочу найти индексный номер отображаемого слайда, сохранить его в переменной idx и щелкнуть дочерний элемент (тег) пейджера с соответствующим индексным номером.
$('.bx-next').on('click', function(){
var idx=$('.benefit-slider li').find("[aria-hidden='false']").index(this);
$('#slidePager li').eq(idx).children().on('click');
};
jQuery # 2
В этом коде событие меняет атрибут пейджера . При нажатии кнопки «Далее» я хочу сохранить индексный номер слайда, отображаемого в переменной idx2. Затем, если порядковый номер отображаемого слайда совпадает с 0, соответствующее изображение становится цветным (обратите внимание, что цветной значок заканчивается на -c, а серый значок заканчивается на -g).
$('.bx-next').on('click', function(){
var idx2 = $('.benefit-container li').index(this);
if($('.benefit-container li').eq(idx2)==0){
$('.b-cost').attr('src','/img/benefit-lowcost-c.png');
$('.b-location').attr('src','/img/benefit-location-g.png');
$('.b-logistic').attr('src','/img/benefit-logistic-g.png');
$('.b-cs').attr('src','/img/benefit-cs-g.png');
};
else if($('.benefit-container li').eq(idx2)==1){
$('.b-cost').attr('src','/img/benefit-lowcost-g.png');
$('.b-location').attr('src','/img/benefit-location-c.png');
$('.b-logistic').attr('src','/img/benefit-logistic-g.png');
$('.b-cs').attr('src','/img/benefit-cs-g.png');
};
else if($('.benefit-container li').eq(idx2)==2){
$('.b-cost').attr('src','/img/benefit-lowcost-g.png');
$('.b-location').attr('src','/img/benefit-location-g.png');
$('.b-logistic').attr('src','/img/benefit-logistic-c.png');
$('.b-cs').attr('src','/img/benefit-cs-g.png');
};
else if($('.benefit-container li').eq(idx2)==3){
$('.b-cost').attr('src','/img/benefit-lowcost-g.png');
$('.b-location').attr('src','/img/benefit-location-g.png');
$('.b-logistic').attr('src','/img/benefit-logistic-g.png');
$('.b-cs').attr('src','/img/benefit-cs-c.png');
};
});
HTML
<!-- CUSTOM PAGER -->
<div class="benefit-container-wrap">
<ul id="slidePager">
<li class="b-conts1">
<a href="#">
<img src="img/benefit-lowcost-c.png" class="b-cost">
</a>
</li>
<li class="b-conts2">
<a href="#">
<img src="img/benefit-location-g.png" class="b-location">
</a>
</li>
<li class="b-conts3">
<a href="#">
<img src="img/benefit-logistic-g.png" class="b-logistic">
</a>
</li>
<li class="b-conts4">
<a href="#">
<img src="img/benefit-cs-g.png" class="b-cs">
</a>
</li>
</ul>
</div>
<!-- BX SLIDER -->
<div class="benefit-container col-sm-7 col-md-6">
<ul class="benefit-slider">
<li>
<h3 class="b-cost">Competitive Price</h3>
</li>
<li>
<h3 class="b-location">Optimal Location</h3>
</li>
<li>
<h3 class="b-logistic">Total Logistic Solution</h3>
</li>
<li>
<h3 class="b-customer">Outstanding Customer Services</h3>
</li>
</ul>
</div>
Загрузить Bx-Slider jQuery
// load bx-slider//
$('.benefit-slider').bxSlider({
pagerCustom:'#slidePager',
controls: true
});
//BxSlider custom pager //
$('.b-conts1').on('click',function(e){
e.preventDefault();
$('.b-cost').attr('src','/img/benefit-lowcost-c.png');
$('.b-location').attr('src','/img/benefit-location-g.png');
$('.b-logistic').attr('src','/img/benefit-logistic-g.png');
$('.b-cs').attr('src','/img/benefit-cs-g.png');
});
$('.b-conts2').on('click',function(e){
e.preventDefault();
$('.b-cost').attr('src','/img/benefit-lowcost-g.png');
$('.b-location').attr('src','/img/benefit-location-c.png');
$('.b-logistic').attr('src','/img/benefit-logistic-g.png');
$('.b-cs').attr('src','/img/benefit-cs-g.png');
});
$('.b-conts3').on('click',function(e){
e.preventDefault();
$('.b-cost').attr('src','/img/benefit-lowcost-g.png');
$('.b-location').attr('src','/img/benefit-location-g.png');
$('.b-logistic').attr('src','/img/benefit-logistic-c.png');
$('.b-cs').attr('src','/img/benefit-cs-g.png');
});
$('.b-conts4').on('click',function(e){
e.preventDefault();
$('.b-cost').attr('src','/img/benefit-lowcost-g.png');
$('.b-location').attr('src','/img/benefit-location-g.png');
$('.b-logistic').attr('src','/img/benefit-logistic-g.png');
$('.b-cs').attr('src','/img/benefit-cs-c.png');
});
Любая помощь будет принята с благодарностью! Спасибо.