Question

我想在示例Webshop页面上使用siema.js制作轮播。 Siema是轻量级的-但没有太多功能。我必须为其创建自己的导航，并且还需要帽子使其在几秒钟后切换到下一页。它具有易于使用的API。

但是，我无法使其更改导航按钮（基本上是无线电输入）的状态。在构造函数中，它具有onInit和onChange函数，但是即使提供了回调示例（https://codepen.io/pawelgrzybek/pen/MpvYNr），我也无法获得所需的结果。

我尝试添加

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

但是它不起作用。大多数时候，当我尝试使用this.currentSlide或carousel.currentSlide访问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方面的专家，不胜感激：）

如何在自动分页上使自定义的siema.js滑块导航更新？

0 个答案: