Дублирование pagination у слайдера (jQuery)

327

04 марта 2018, 23:26

Не могу понять, как генерировать у слайдеров 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/

Answer 1

Я просто немного тупенький :D

Вот нужный код может кому надо будет

 //slider
var colorAtiveItem = function (container, index) {
        $('.pagination__item',container)
        .eq(index)
        .addClass('pagination__item--activ')
        .siblings()
        .removeClass('pagination__item--activ');
}
//generation number of slide
var generateItems = function () {
    var sliders = $('.slider__teg');
    for (var indexSlider = 0; indexSlider < sliders.length; indexSlider++) {
        currentSliders = sliders[indexSlider];
        $('.slider__item', currentSliders).each(function (indexNumber) {
            var paginationItem = $('<li>', {
                attr: {
                    class: 'pagination__item'
                },
                html: '<a class="pagination__link">' + (indexNumber + 1) + '</a>'
            });
            $('.pagination__list', currentSliders).append(paginationItem);
        })
    }
};
generateItems();
//searh number slid and activ 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, function () {
            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);
    colorAtiveItem(container, index);
});