Slider - chciałbym przerzucać obraz w sliderze strzałkami e.keyCode

Question

Cześć,

Co tu jest źle.. przerzuca mi od 0-2 (w zasadzie do X bo to nie ma znaczenia) ale już od X do 0 nie.. tzn przerzuca ale również do przodu... oto kod... wytłumaczcie mi dlaczego tak się dzieje. oto kod:

const slideList = [{
 img: "images/img1.jpg",
 text: 'Pierwszy tekst'
},
{
 img: "images/img2.jpg",
 text: 'Drugi tekst'
},
{
 img: "images/img3.jpg",
 text: 'Trzeci tekst'
}];

const img = document.querySelector('img.slider');
const h1 = document.querySelector('h1');
const dots = document.querySelectorAll('span');

const time = 30000;
let active = 1;

const changeSlide = () => {

  if(active === slideList.length){
    active = 0;
  }

  img.removeAttribute('img');
  img.setAttribute("src", slideList[active].img);
  h1.textContent = slideList[active].text;

  dots.forEach(el => {
    el.classList.remove('active');
  })
  dots[active].classList.add('active');

  active++;

}


setInterval(changeSlide, time);


// Sprawdź kod klawisza
// window.addEventListener('keydown', function(e){
//   console.log(e.keyCode);

// });


/**
 *  Jutro -- Popracuj nad przełączeniem slidów poprzez strzałki
 *
 */


window.addEventListener('keydown', (e) => {

  if(e.keyCode === 39) {

    console.log(`Strzałka w prawo ----> e.keyCode = ${e.keyCode}`);


    if(active === slideList.length + 1){
      active = 0;
      changeSlide();
    }

    active = active++;
    changeSlide();
  }

  if (e.keyCode === 37) {
      console.log(`Strzałka w lewo <---- e.keyCode: ${e.keyCode}`);
      // console.log(active);


      if (active === -1) {
          active = slideList.length;
          console.log(`if active = -1: ${active}`);

      } else {
        active = active--;
      }

      changeSlide();
  }
});

 

Answer 1

if(active === slideList.length + 1){

Nie wiem czym tam jest zmienna active, ale raczej nie powinno zdarzyć się tak, że porównywana liczba/indeks jest większa od długości tablicy. Prędzej tu powinno być porównanie do slideList.length - 1, czyli ostatniego indeksu tablicy. Wypisz sobie przed tym ifem (albo postaw breakpoint i sprawdź w runtime) wartość zmiennej active oraz slideList.length i będziesz wiedział co tam w danym momencie jest i dlaczego if nie działa.

Comments

faktycznie masz rację, bo wkleiłem tylko część kodu. Chodzi o to ze na sliderze są aktualnie 3 zdjęcia i funkcja setinterval przerzuca je do przodu co kilka sekund, ale lepiej wkleję cały kod:

const slideList = [{
 img: "images/img1.jpg",
 text: 'Pierwszy tekst'
},
{
 img: "images/img2.jpg",
 text: 'Drugi tekst'
},
{
 img: "images/img3.jpg",
 text: 'Trzeci tekst'
}];

const img = document.querySelector('img.slider');
const h1 = document.querySelector('h1');
const dots = document.querySelectorAll('span');

const time = 30000;
let active = 1;

const changeSlide = () => {

  if(active === slideList.length){
    active = 0;
  }

  img.removeAttribute('img');
  img.setAttribute("src", slideList[active].img);
  h1.textContent = slideList[active].text;

  dots.forEach(el => {
    el.classList.remove('active');
  })
  dots[active].classList.add('active');

  active++;

}


setInterval(changeSlide, time);


// Sprawdź kod klawisza
// window.addEventListener('keydown', function(e){
//   console.log(e.keyCode);

// });


/**
 *  Jutro -- Popracuj nad przełączeniem slidów poprzez strzałki
 *
 */


window.addEventListener('keydown', (e) => {

  if(e.keyCode === 39) {

    console.log(`Strzałka w prawo ----> e.keyCode = ${e.keyCode}`);


    if(active === slideList.length + 1){
      active = 0;
      changeSlide();
    }

    active = active++;
    changeSlide();
  }

  if (e.keyCode === 37) {
      console.log(`Strzałka w lewo <---- e.keyCode: ${e.keyCode}`);
      // console.log(active);


      if (active === -1) {
          active = slideList.length;
          console.log(`if active = -1: ${active}`);

      } else {
        active = active--;
      }

      changeSlide();
  }
});

 

---

W 23 linii powinno być if(active === slideList.length - 1) {

, bo jeśli active === sideList.length, to znaczy że wskazuje na rzekomy trzeci indeks tablicy, a taki nie istnieje (trzy elementowa tablica ma indeksy 0, 1, 2 - tablice numerowane są od zera). Więc linia 28 powinna rzucić błędem, bo slideList[active] zwróci undefined, a taka wartość nie ma property img. Sprawdź konsolę, powinien być tam błąd.

---

no właśnie dlatego, że on nie występuje to ma wskoczyć na index 0 bo gdy zrobie tak jak mówisz - przejdzie mi po indexie 0 i 1 a na 3 zdjęciu (elemencie 2) wskoczy na index 0. W rezultacie będą wyświetlanie tylko dwa obrazu zamiast trzech. Bardziej chodzi mi o tą strzałkę w lewo dlaczego zdjęcia się nie przełączają do tyłu

---

A to czy przy setInterval jest problem, że on automatycznie nie wraca do pierwszego zdjęcia, gdy dojdzie do ostatniego? Czy Tobie cały czas chodzi o sytuację, gdy sam strzałkami na klawiaturze przełączasz slajdy i dojdziesz do ostatniego?

Pokaż jeszcze kod HTML tego slajdera, żeby można było to przetestować.

---

setinterval działa i nic tam nie ma złego chodzi mi tyko o to jak napisac kod który strzałką w lewo będzie cofał zdjęcia w sliderze. Dodam, że do przeodu (strzałka w prawo) to działa idealnie.

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Slider</title>
  <style>
    * {
      margin: 0;
    }

    header {
      width: 100%;
      height: 100vh;
      position: relative;
      overflow: hidden;
    }

    img {
      position: absolute;
      min-width: 100%;
      min-height: 100%;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      opacity: 0.6;
    }

    h1 {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      font-size: 40px;
      font-family: tahoma, sans-serif;
      text-shadow: 0 0 6px white;
    }

    .dots {
      position: absolute;
      bottom: 30px;
      left: 50%;
      transform: translateX(-50%)
    }

    .dots span {
      display: inline-block;
      background-color: #000;
      margin: 0 20px;
      width: 10px;
      height: 10px;
      border-radius: 50%;
      box-shadow: 0 0 0 5px white;
    }

    .dots span.active {
      box-shadow: 0 0 0 5px white, 0 0 3px 10px red;
    }
  </style>
</head>

<body>
  <header>
    <img class="slider" src="images/img1.jpg" alt="">
    <h1 class="slider">Pierwszy tekst</h1>
    <div class="dots">
      <span id="one" class="active"></span>
      <span id="two"></span>
      <span id="three"></span>
    </div>
  </header>

  <script src="main.js"></script>
</body>

</html>

 

---

Można do funkcji changeSlide przekazać parametr, który powie w którym kierunku slajdy mają się przesuwać i na tej podstawie można decydować czy zmienna active będzie inkrementowana, dekrementowana czy zerowana lub ustawiana na koniec listy.

Przykład: https://codepen.io/ScriptyChris/pen/XWpwPqV?editors=1010