Блог

Я ищу альтернативу ванильного js для slick.js . Я пытаюсь заменить его на tiny-slider. У меня есть только одна проблема, поскольку я использую Kentico amp; asp.net все завернуто в тег формы.

С помощью slick, если я проверяю прослушиватели событий на наличие точечных кнопок, он регистрируется до прослушивателя формы (а slick позаботится об остальном с помощью event.preventdefault ).

С помощью tiny-nav, независимо от того, где я размещаю свои теги скрипта и откуда я загружаю библиотеку (head, body, inline), крошечный слайдер является последним в очереди прослушивателя событий. Очередь прослушивателя событий. Это означает, что нажатие на точки (кнопка ie) отправляет страницу.

Есть ли что-то, чего мне здесь не хватает?

Редактировать: вот код:

 document.addEventListener("DOMContentLoaded", function () { //also same result with $(function(){
    tns({
        container: '.my-slider',
        autoplay: true,
        items: 1,
        autoplayButtonOutput: false,
        lazyload: true,
        controlsContainer: '.slider-controls',
        controlsPosition: 'bottom',
        navPosition: 'bottom'
        //navContainer: 'dots-container'
    });
});
  

Если я правильно понял, проблема в том, что кнопки управления крошечным слайдером запускают <form> вместо управления слайдером?
В этом случае вам нужно добавить type="button" к каждому <button> в этом скрипте, потому что по умолчанию (если не указано) каждый <button> поставляется с type="submit" , и из-за этого он запускает <form> . При добавлении указанных параметров убедитесь, что они type="submit" следуют сразу за <button> тегом, например: <button type="button" data-controls="prev" tabindex="-1"> .

Я только начал использовать Tiny-Slider и наткнулся именно на эту проблему, поэтому подумал, что могу поделиться решением.

Спасибо за решение этой проблемы, Андрей.

Способ, которым я реализовал это решение, заключался в том, чтобы запустить следующее после запуска слайдера…

     const tnsDotItems = document.querySelectorAll('.tns-nav button');
    if (tnsDotItems.length) {
        [].forEach.call(tnsDotItems, function (e) {
            e.setAttribute('type', 'button');
        });
    }
  

Это исправило точки, и, возможно, также пришлось бы сделать кнопки prev и next с помощью ‘.tns-controls button’, если требуется.