Ползунок примера карусели WAI имеет другое поведение со стрелками <> против 123 ссылок внизу

Question

https://www.w3.org/WAI/tutorials/carousels/working-example/

Кто-нибудь заметил, что слайд-переходы немного резкие?Например:

Когда мы делаем это с левой <</kbd> > стрелкой вправо, выдвиньте старую, вставьте новую.
Но когда мы делаем это с 1 2 3 ссылками внизу, сейчас он просто становится белым и скользит по новому.

Я просто надеюсь, что вы чувствуете, что это должно иметь аналогичный опыт, так как многие люди будут следовать W3C в качестве стандарта?Пожалуйста, предоставьте хотя бы исправление, чтобы мы все могли правильно его установить.

Кроме того, я также сообщал о такой же проблеме в официальном W3C GitHub: https://github.com/w3c/wai-tutorials/issues/571

Answer 1

Вам нужно изменить некоторые JS, HTML и CSS.

JS Change .....
Сначала заменить все тело функции на setSlides function.Вы можете проверить разницу, сравнив этот код со старым.

function setSlides(new_current, setFocusHere, transition, announceItemHere) {
    // Focus, transition and announce Item are optional parameters.
    // focus denotes if the focus should be set after the
    // carousel advanced to slide number new_current.
    // transition denotes if the transition is going into the
    // next or previous direction.
    // If announceItem is set to true, the live region’s text is changed (and announced)
    // Here defaults are set:

    setFocus = typeof setFocusHere !== 'undefined' ? setFocusHere : false;
    transition = typeof transition !== 'undefined' ? transition : 'none';
    announceItem = typeof announceItemHere !== 'undefined' ? announceItemHere : false;

    new_current = parseFloat(new_current);

    var length = slides.length;
    var new_next = new_current+1;
    var new_prev = new_current-1;

    // If the next slide number is equal to the length,
    // the next slide should be the first one of the slides.
    // If the previous slide number is less than 0.
    // the previous slide is the last of the slides.
    if(new_next === length) {
      new_next = 0;
    } else if(new_prev < 0) {
      new_prev = length-1;
    }

    // Reset slide classes
    //for (var i = slides.length - 1; i >= 0; i--) {
      //slides[i].className = "slide";
    //}

    var prevLeft = 0;
    for (var i = new_current - 1; i < -1; i--) {
        prevLeft += 100;
        slides[i].style.left = '-' + prevLeft + '%';
    }

    slides[new_current].style.left = 0;

    var nextLeft = 0;
    for (var i = new_current + 1; i < length; i++) {
        prevLeft += 100;
        slides[i].style.left = '-' + nextLeft + '%';
    }

    // Add classes to the previous, next and current slide
    //slides[new_next].className = 'next slide' + ((transition == 'next') ? ' in-transition' : '');
    slides[new_next].setAttribute('aria-hidden', 'true');

    //slides[new_prev].className = 'prev slide' + ((transition == 'prev') ? ' in-transition' : '');
    slides[new_prev].setAttribute('aria-hidden', 'true');

    //slides[new_current].className = 'current slide';
    slides[new_current].removeAttribute('aria-hidden');

    // Update the text in the live region which is then announced by screen readers.
    if (announceItem) {
      carousel.querySelector('.liveregion').textContent = 'Item ' + (new_current + 1) + ' of ' + slides.length;
    }

    // Update the buttons in the slider navigation to match the currently displayed  item
    if(settings.slidenav) {
      var buttons = carousel.querySelectorAll('.slidenav button[data-slide]');
      for (var j = buttons.length - 1; j >= 0; j--) {
        buttons[j].className = '';
        buttons[j].innerHTML = '<span class="visuallyhidden">News</span> ' + (j+1);
      }
      buttons[new_current].className = "current";
      buttons[new_current].innerHTML = '<span class="visuallyhidden">News</span> ' + (new_current+1) + ' <span class="visuallyhidden">(Current Item)</span>';
    }

    // Set the global index to the new current value
    index = new_current;

  }

И замените все тело функции slidenav.addEventListener('click', function(event) { на приведенный ниже код.

slidenav.addEventListener('click', function(event) {
        var button = event.target;
        if (button.localName == 'button') {
          if (button.getAttribute('data-slide')) {
            //stopAnimation();
            //setSlides(button.getAttribute('data-slide'), true);

            var nextOrPrev;
            var getCurrent = document.querySelector('button.current');
            var diff = getCurrent.getAttribute('data-slide') - button.getAttribute('data-slide');
            diff = (diff < 0) ? (-1 * diff) : diff;
            if (getCurrent.getAttribute('data-slide') < button.getAttribute('data-slide')) {
                nextOrPrev = 'prev';
            } else {
                nextOrPrev = 'next';
            }

            setSlides(button.getAttribute('data-slide'), false, nextOrPrev, announceItem);

          } else if (button.getAttribute('data-action') == "stop") {
            stopAnimation();
          } else if (button.getAttribute('data-action') == "start") {
            startAnimation();
          }
        }
      }, true);

ИHTML изменение .Удалить все prev next и current class из li И установить встроенный CSS

left: 0; for first li
left: 100%; for second li
left: 200%; for third li
left: 300% for fourth li
..................
..................
add more 100% for each next li

Удалить все visibility: hidden

Пожалуйста, дайте мне знать, если это работает длявы.