Как настроить обновление ползунка siema.js для автоматической подкачки? - PullRequest
Новая
       9

Как настроить обновление ползунка siema.js для автоматической подкачки?

0 голосов
/ 07 февраля 2019

Я хочу сделать карусель с siema.js на моей странице интернет-магазина.Siema легковесная, но не имеет слишком много функций.Мне пришлось создать свою собственную навигацию для него, а также сделать так, чтобы через несколько секунд он переключился на следующую страницу.Он имеет простой в использовании API.

Однако я не смог заставить его изменить состояние моих кнопок навигации (которые в основном являются радиовходами).В конструкторе есть функции onInit и onChange, но мне не удалось получить желаемый результат, даже с предоставленным примером обратных вызовов (https://codepen.io/pawelgrzybek/pen/MpvYNr).

Я пытался добавить 

    document.querySelector(`.slider-nav:nth-child(${this.currentSlide.toString()})`)
            .setAttribute('checked', 'checked');

но это не сработало. В большинстве случаев, когда я пытался получить доступ к currentSlide с помощью this.currentSlide или carousel.currentSlide, в результате я получал неопределенное значение.

Я также пытался сделатьпользовательское событие, отправляя его изнутри функции onChange в конструкторе, но когда я добавил прослушиватель событий, я получил ошибку: TypeError: carousel.addEventListener is not a function.

Также попытался добавить его в функцию onInit: onInit:() => {setInterval (() => {

            carousel.next();
                        document.querySelector(`.slider-nav:nth-child(${this.currentSlide.toString()})`).setAttribute('checked', 'checked');
        }, 5000);
    },

, и там я получил ошибку, что document.querySelector(...) is null.

JSFiddle demo

JavaScript 

const carousel = new Siema({
    selector: '#carousel',
    duration: 500,
    easing: 'ease-out',
    perPage: 1,
    startIndex: 0,
    draggable: true,
    multipleDrag: false,
    threshold: 20,
    loop: true,
    rtl: false,
    onInit: () => { 
        setInterval(() => {
            carousel.next();
        }, 5000);
    },
    onChange: () => {},
      });

Siema.prototype.addPagination = function() {
const type = 'radio',
    name = 'slider',
    title = 'slide',
    cls = 'slider-nav';

for (let i = 0; i < carousel.innerElements.length; i++) {
    title.value = 'slide'+ (i).toString();
    const btn = document.createElement('input');
    btn.setAttribute('type', type);
    btn.setAttribute('name', name);
    btn.setAttribute('title', title + (i+1).toString());
    btn.setAttribute('class', cls);

    btn.addEventListener('click', () => this.goTo(i));

    document.getElementById('carousel-nav').appendChild(btn);
    }
}

carousel.addPagination();

Прямо сейчас, он генерирует столько кнопок, сколько необходимо, подкачка с кнопками работает с функцией goTo, но я хочу, чтобы ползунок проверял первыйрадио вход, когда он загружается, и на каждом автоскрываюсь, чтобы проверить переключатель текущего слайда.

Я не являюсь экспертом в JS и буду признателен за любую помощь:)

...