Изо всех сил пытаясь закодировать функциональность моих кнопок нумерации страниц на пользовательском слайдере - PullRequest
Новая
       8

Изо всех сил пытаясь закодировать функциональность моих кнопок нумерации страниц на пользовательском слайдере

0 голосов
/ 07 марта 2020

Я создаю пользовательский слайдер для клиента, и я столкнулся с небольшим плато на нем.

ЦЕЛЬ

  • Создание пользовательского слайдера для 6 различных отраслей промышленности .
  • У ползунка должны быть кнопки «Вперед» и «Назад», которые скользят по различным отраслям.
  • Должны быть пользовательские кнопки разбиения на страницы, которые позволяют пользователю перемещаться по ползунку для указания c слайдов. при щелчке мыши.
  • Нумерация страниц должна идентифицировать, на каком слайде мы сейчас работаем, и выделить соответствующую кнопку нумерации страниц.

ЧТО Я СДЕЛАЛ

  • Слайды, кнопки «Вперед» и «Назад», а также кнопки разбиения на страницы были созданы и стилизованы.
  • Функциональные возможности кнопок «Вперед» и «Назад» работают.
  • Ползунок определяет, на каком слайде он находится, и выделяет соответствующая кнопка нумерации страниц.

ПРОБЛЕМЫ, КОТОРЫЕ Я НАХОДИТСЯ

  • Я не могу заставить кнопки пагинации работать при нажатии.

Кроме этих двух проблем, это в значительной степени там.

Я создал перо для этого на codepen, чтобы вы, ребята, увидели: https://codepen.io/chris-jk/pen/abOVzoy

Я вставлю соответствующий javascript ниже для navigateSlider функция и для нумерации страниц. 

function navigateSlider() {
    slidesWrapper.style.transform = "translateX(-" + (100 * counter) + "%)";        
    paginationButtons[prevCounter].classList.remove("sel");
    paginationButtons[counter].classList.add("sel");
    //bar.style.animationDuration = '1000s';
    //restartAutomation();
    prevCounter = counter;
}

var pagination = document.getElementsByClassName("pagination")[0];
var paginationButtons = pagination.getElementsByTagName("span");
   for(var i = 0;i < len;i++) {
      var ele = document.getElementsByTagName("span");
      ele.onclick = (function(i) {
         return function() {
            counter = i;
            navigateSlider();
         }
      })(i)
      if (i === 0) {ele.className = "sel";}
      pagination.appendChild(ele);
   }

Любая помощь приветствуется!

...