Valaki rá tudna nézni erre a tutorial videóra, mert szerintem rossz (Javascript kezdő szint)?

Mi nem működik rajta? Fejlesztő eszköztár (F12 vagy CTRL+Shift+I billentyűkombináció) konzolja ír ki valamilyen hibát?

Az általad bepötyögött forráskódokat fel tudnád tölteni a pastebin.com kódmegosztó portálra?

Azért nem működik, mert az első "st" osztályú blokkelemnek nincsen "first" osztálya.

Szóval e helyett:

<div class="st">

<img src="h.jpg" alt="" srcset="">

</div>

ezt kéne írni:

<div class="st first">

<img src="h.jpg" alt="" srcset="">

</div>

"De nem értem, miért ennyire rövid a JS benne?"

Az csak az automatikus váltásért felelős.

"Hol van belőle, hogy a képek jobbra-balra elmozdulnak?"

Azért a CSS felelős.

Egyébként ennél a kódrészletnél:

<div class="nav-m">

<label for="radio1" class="m-btn"></label>

<label for="radio1" class="m-btn"></label>

<label for="radio1" class="m-btn"></label>

<label for="radio1" class="m-btn"></label>

</div>

is így kéne írni:

<div class="nav-m">

<label for="radio1" class="m-btn"></label>

<label for="radio2" class="m-btn"></label>

<label for="radio3" class="m-btn"></label>

<label for="radio4" class="m-btn"></label>

</div>

Az előbb megnyitottam a második linket, és ugyanaz jött be rajta, mint az elsőn... mindegy.

Na, a dolog lényege, hogy vannak a radiobutton-ök, #radio1, #radio2 és így tovább. Amikor kijelölésre kerül (:checked) egy adott radiobutton, az azt követő .first osztályú elem margin-left tulajdonsága megváltozik, ettől mozdul el a kép, és mivel van benne egy transition tulajdonság, ezért ez animálódva fog megtörténni.

#radio2:checked ~ .first {

margin-left: -20%;

}

#radio3:checked ~ .first {

margin-left: -40%;

}

Az egyetlen aprócska hiba, hogy a kódban class="first" következetesen class="st" szerepel mindenhol. Mivel a css a .first osztályú elemre hivatkozik, így nyilván az .st osztályú elemeket nem találja meg.

A Javascriptnek csak annyi szerepe van, hogy manuálisan "nyomkodja" a radiogombokat adott időközönként.

Amúgy ez egy NAGYON primitív slider, mert nincs tekintettel a képek méretére, méretarányaira, fixen be van drótozva a négy darab kép, és még sorolhatnám.

A setInterval() metódus

[link]

egy - az első paraméterében levő - függvényt hajt végre a második paraméterben megadott időközönként - jelen esetben ez 5000 ms.

Maga az első paraméterben levő függvény annyit tesz, hogy bejelöli az adott sorszámú rádiógombot majd növeli eggyel a sorszámot. Ha a sorszám nagyobb mint 4, akkor a sorszám egyenlő lesz eggyel.

"És minek írta az elejére, hogy type="text/javascript?"

Azért, mert elvileg lehetne más kliensoldali kódot is használni. Nem kötelező megadni.