Я пытаюсь создать пользовательский слайдер, используя jQuery, только я не уверен в лучшей практике, как это сделать.
Мой слайдер имеет 3 слайда и блок управления, каждый из которых относится к слайду (1, 2, 3).
Когда щелкнул элемент управления, у меня получилось, что мой слайд исчез, только я не уверен, как сказать, был ли нажат элемент управления X, добавьте активный класс к соответствующему слайду?
Ive сделал скрипку, чтобы объяснить, что я надеюсь, помогает, что мне нужно, однако, является объяснением лучшей практики в этом?
Извините, если вопросы трудно понять!
То, что я использую, чтобы погасить мой текущий слайд, но как только он ушел, я не могу полагаться на активный класс, чтобы сказать, добавьте класс в следующий элемент?
$('.ctrl-one').click(function(){
$('.active .slide-img').animate({
'marginRight' : "-=350px"
}, 500, 'easeOutQuint', function(){
$('.active .description').fadeOut().promise().done(function(){
$(this).parent().removeClass('active');
});
});
});
Я думаю, это то, что вам нужно, попробуйте этот код, но я уверен, что вы можете найти много разных методов.
$('.controls a').click(function() {
var current = $(this).attr('class').replace('ctrl-', '');
if (!$('.sector-banner .' + current).hasClass('active')) {
$('.active').animate({
'marginRight': "-=350px"
}, 500, 'linear', function() {
$(this).fadeOut().promise().done(function() {
$(this).css('margin-right',0);
$(this).removeClass('active');
$('.sector-banner .' + current).addClass('active');
$('.sector-banner .' + current).fadeIn();
});
});
}
});