• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

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

VPS Starter Arubacloud
+1 głos
105 wizyt
pytanie zadane 29 kwietnia 2021 w JavaScript przez molik Użytkownik (950 p.)
edycja 29 kwietnia 2021 przez molik

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();
  }
});

 

1 odpowiedź

+1 głos
odpowiedź 29 kwietnia 2021 przez ScriptyChris Mędrzec (190,190 p.)
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.

komentarz 29 kwietnia 2021 przez molik Użytkownik (950 p.)

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();
  }
});

 

komentarz 29 kwietnia 2021 przez ScriptyChris Mędrzec (190,190 p.)

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.

komentarz 29 kwietnia 2021 przez molik Użytkownik (950 p.)
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
komentarz 29 kwietnia 2021 przez ScriptyChris Mędrzec (190,190 p.)

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ć.

komentarz 29 kwietnia 2021 przez molik Użytkownik (950 p.)

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>

 

1
komentarz 29 kwietnia 2021 przez ScriptyChris Mędrzec (190,190 p.)

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

Podobne pytania

+1 głos
1 odpowiedź 112 wizyt
pytanie zadane 18 sierpnia 2020 w JavaScript przez Marak123 Stary wyjadacz (11,190 p.)
0 głosów
1 odpowiedź 156 wizyt
pytanie zadane 11 grudnia 2019 w JavaScript przez PROFF Obywatel (1,180 p.)
0 głosów
1 odpowiedź 497 wizyt

92,453 zapytań

141,262 odpowiedzi

319,088 komentarzy

61,854 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...