Не могу понять, как генерировать у слайдеров pagination таким образом, чтобы они не повторялась. И у каждого слайдера пункты pagination соответствовали кол-во его элементов и начинали подсвечиваться с активного элемента в конкретном слайдере.
//slider
//color active pagination slide
var colorAtiveItem = function (index) {
$('.slider__teg')
.find('.pagination__item')
.eq(index)
.addClass('pagination__item--activ')
.siblings()
.removeClass('pagination__item--activ');
}
//generation number of slide
var generateItems = function (index) {
$('.slider__item').each(function (index) {
var paginationItem = $('<li>', {
attr: {
class: 'pagination__item'
},
html: '<a class="pagination__link">' + (index + 1) + '</a>'
});
$('.pagination__list').append(paginationItem);
})
};
generateItems();
//listing slid
var moveSlide = function (cont, slideNum) {
var items = cont.find('.slider__item'),
activeSlide = items.filter('.active__slide'),
reqItem = items.eq(slideNum),
reqIndex = reqItem.index(),
list = cont.find('.slider__list'),
dur = 500;
if (reqItem.length) {
list.animate({
'left': -reqIndex * 100 + '%'
}, dur, () => {
activeSlide.removeClass('active__slide');
reqItem.addClass('active__slide');
colorAtiveItem(slideNum);
});
}
};
//click ruls btn
$('.slider__controls').on('click', function (event) {
event.preventDefault();
var $this = $(event.target),
cont = $this.closest('.slider__teg'),
items = $('.slider__item', cont),
activeItem = items.filter('.active__slide');
var existedItem,
edgeItem,
reqItem;
if ($this.hasClass('controls__btn__next')) {
existedItem = activeItem.next();
edgeItem = items.first();
}
if ($this.hasClass('controls__btn__prev')) {
existedItem = activeItem.prev();
edgeItem = items.last();
}
reqItem = existedItem.length ? existedItem.index() : edgeItem.index();
moveSlide(cont, reqItem);
});
//click on pugination
$('body').on('click', '.pagination__item', function () {
var $this = $(this),
container = $this.closest('.slider__teg'),
index = $this.index();
moveSlide(container, index);
activeSlide(index);
});
Мой код https://jsfiddle.net/3oonj7ex/3/