Slider 101 trainings

Slider-ul din screencast-ul de mai jos este strict pentru scopuri didactice. Dacă îl folosiţi pentru site-uri comerciale o faceţi pe riscul vostru.

În construcţia slider-ului folosim o structură compusă dintr-o fereastră care limiteaza vizibilitatea doar la slider-ul curent, un container care se deplasează pe orizontală astfel încât să expună pe rând fiecare slide, colecţia de slider-e şi două butoane pentru comanda manuală.

În mod implicit slider-ul expune fiecare slider pe rând la intervale regulate, iar când ajunge la capăt se reîntoarce la primul slide din listă. Când utilizatorul poziţionează mouse-ul deasupra slider-ului, modul automat de expunere se întrerupe până când mouse-ul este mutat în afara zonei slider-ului. Butoanele vor fi poziţionate în capetele slider-ului pentru a indica utilizatorului direcţia în care se va deplasa slider-ul la acţionarea butonului.

Slider101 [1/4] - Structura HTML şi funcţionalitate de bază

Slider101 [2/4] - Adăugare butoane şi pauză la hoover

Slider101 [3/4] - Gruparea codului într-un plugin jQuery

Slider101 [4/4] - Demo cu mai multe instanţe de slider-e