Как добавить пагинацию в слайдер?

Question

[Денис Кузьмин]

Добавляю пагинацию в слайдер кодом

if ( 0 < ( this.maxImages - ( this.slider.parent().width() / this.slider.find(".slide").width() ) )) {
        this.slider.parent().append('<div class="slider-btn previous"></div><div class="slider-btn next"></div><div class="slider-pagination"></div>');
        this.slider.siblings(".slide").foreach(function () {
          this.slider.siblings(".slider-pagination").append('<div class="slider-point"></div>');
        });
    }

.slider-point не добавляется. Как добавить количество точек в .slider-pagination по количеству слайдов в .slider?

Полный код:

Answer 1

[0xD34F]

Считаем количество слайдов:

const slidesCount = this.slider.find('.slide').length;
// или
const { length: slidesCount } = this.slider.children();

Разметка одной точки:

const dotHTML = '<div class="slider-point"></div>';

Размножаем её:

const dotsHTML = Array(slidesCount).fill(dotHTML).join('');
// или
const dotsHTML = Array(slidesCount + 1).join(dotHTML);
// или
const dotsHTML = dotHTML.repeat(slidesCount);

И добавляем куда надо:

this.slider.siblings('.slider-pagination').append(dotsHTML);
// или
this.slider.closest('.slider-box').find('.slider-pagination').html(dotsHTML);

Comments

[Денис Кузьмин]

Спасибо. Точки добавились. Подскажите, как задать на них функцию? Записал так:

this.nextImage = this.nextImage.bind(this);

   this.sliderPoint = this.slider.siblings(".slider-point");
   this.sliderPoint.on("click", this.nextImage);


previousImage() {
   this.currentImg = Math.max(this.currentImg - 1, 0);
   this.scrollImages(this.currentImg, this.speed);
}

Ничего не происходит.

[0xD34F]

DenKuzmin,

Вам отчего-то кажется, будто метод siblings - это такая волшебная штука, которая найдёт любые нужные вам объекты. Это не так. Откройте документацию и разберитесь, что он делает. Затем посмотрите на свою разметку. Подумайте и осознайте свои ошибки.

Что до переключения слайдов по точкам - почему вы пытаетесь делать это с помощью метода nextImage? Это должен быть переход к какому-то конкретному слайду, а не относительно текущего. Вам нужно написать соответствующий метод - принимающий номер слайда и выполняющий прокрутку к нему.

[Денис Кузьмин]

0xD34F, nextImage для примера.

[0xD34F]

DenKuzmin, дальше-то что?

[Денис Кузьмин]

0xD34F, что?