сss (9) сss3 (14) ajax (2) css (42) drupal (7) Fix IE6 (4) font (4) html (23) javascript (22) jQuery (15) js (5) less (1) php (1) scss (1) soft (2) vue (1) webstorm (1) wordpress (1)

Слайдер на jQuery (методом fadeIn) с управлением

HTML:

⟨div⟩
⟨a class="item_prev"⟩PREV⟨/a⟩
⟨a class="item_next"⟩NEXT⟨/a⟩
⟨/div⟩
⟨div class="item"⟩
Слайд 1
⟨/div⟩
⟨div class="item"⟩
Слайд 2
⟨/div⟩
...
⟨div class="item"⟩
Слайд N
⟨/div⟩

SCRIPT:

$(document).ready(function(){

var sub_num = 0;
$('.item_prev').click(function() {
var sub = $(this).parent().parent('li').children('.item');
var sub_sum = $(sub).length-1;
console.log(sub_num);
if(sub_num > 0){
sub_num--;
}
else{
sub_num=sub_sum;
}
$(sub).fadeOut().removeClass('active');
$(sub).eq(sub_num).fadeIn().addClass('active');
});
$('.item_next').click(function() {
var sub = $(this).parent().parent('li').children('.item');
var sub_sum = $(sub).length-1;
if(sub_num < sub_sum){
sub_num++;
}
else{
sub_num=0;
}
$(sub).fadeOut().removeClass('active');
$(sub).eq(sub_num).fadeIn().addClass('active');
return sub_num;
});

});