解决与JavaScript中导航滑块的冲突

Question

I'm currently building a small slider in Javascript which is working pretty well (almost) but I have an issue !

You will find here the codepen link : Slider

Line 22, 32, 38

I have my two navigations supposed to add a class active (after remove) but I have a shift with my next/prev button and the other buttons below the slider. I can't find a solution and it's a pain :( !

Any idea ? Thank you !

Answer 1

Try to use this your changed code:

var currentSlide = 0;
var prevSlide = 0;
var slider = document.getElementById('slider').children[0];
var slides = document.getElementsByClassName('slider-item');
var links = document.getElementsByClassName('link');
var prev = document.querySelector('.prev');
var next = document.querySelector('.next');
var btnActive = document.getElementsByClassName('set-active');

for (var i = 0; i < slides.length; i++) {
  slider.style.width = (slides[0].clientWidth * slides.length) + 'px';
  links[i].innerHTML = i + 1;
  links[i].addEventListener('click', function(e) {
    e.preventDefault();

    prevSlide = currentSlide;
    currentSlide = this.getAttribute('data-href');


    slider.style.left = '-' + (100 * currentSlide) + '%';
    utils.addClass(links[currentSlide], 'active');
    utils.removeClass(links[prevSlide], 'active');

  });
}

function updateSlide() {

  slider.style.left = '-' + (100 * currentSlide) + '%';
    utils.addClass(links[currentSlide], 'active');
    utils.removeClass(links[prevSlide], 'active');
}

prev.addEventListener('click', function() {
  if(currentSlide == 0)
    return
  prevSlide = currentSlide;
  currentSlide--;

  updateSlide();
});
next.addEventListener('click', function() {  
  if(currentSlide == 10)
    return
  prevSlide = currentSlide;
  currentSlide++;
  updateSlide();
});

var utils = utils || (function() {
  'use strict';

  return {
    hasClass: function(el, cl) {
      var regex = new RegExp('(?:\\s|^)' + cl + '(?:\\s|$)');
      return !!el.className.match(regex);
    },
    addClass: function(el, cl) {
      el.className += ' ' + cl;
    },
    removeClass: function(el, cl) {
      var regex = new RegExp('(?:\\s|^)' + cl + '(?:\\s|$)');
      el.className = el.className.replace(regex, ' ');
    },
    toggleClass: function(el, cl) {
      var testClass = this.hasClass(el, cl) ? this.removeClass(el, cl) : this.addClass(el, cl);
    },
    getNextElementSibling: function(el) {
      if (el.nextElementSibling) {
        return el.nextElementSibling;
      } else {
        do {
          el = el.nextSibling;
        }
        while (el && el.nodeType !== 1);
        return el;
      }
    },
    elementInViewport: function(el) {
      var rect = el.getBoundingClientRect();
      return (
        rect.top >= 0 && rect.left >= 0 && rect.top <= (window.innerHeight || document.documentElement.clientHeight)
      );
    },
    sameHeight: function(el) {
      var maxHeight = 0;
      for (var i = 0; i < el.length; i++) {
        var thisHeight = el[i].offsetHeight;
        if (thisHeight > maxHeight) {
          maxHeight = thisHeight;
        }
      }
      for (i = 0; i < el.length; i++) {
        el[i].style.height = maxHeight + 'px';
      }
    }
  };
})();