Dacă nu utilizați biblioteca, pagina funcționează mai bine (din cauza numărului redus de coduri) și puteți plasa prezentarea de diapozitive create oriunde, fără a vă îngrijora să descărcați fișiere suplimentare.
Prezentare de diapozitive de bază
În HTML, avem nevoie de un container pentru diapozitive, precum și de slide-urile. Iată cum va arăta:
Iată ce arată kernelul CSS:
Acum avem un slide show de bază.
Nota privind compatibilitatea:
Transitările CSS nu sunt acceptate în versiunea IE versiunea 9 sau mai mică. În aceste browsere, în loc de efectul de dizolvare, prezentarea de diapozitive se va estompa fără probleme, arătând următorul diapozitiv.
UX și disponibilitate
Luați în considerare modul în care un slideshow poate degrada experiența utilizatorului și disponibilitatea site-ului.
Prezentarea de diapozitive poate ascunde conținut important
Informațiile importante nu ar trebui să fie afișate printr-o expunere de diapozitive. Potrivit unui studiu realizat de Universitatea din Notre Dame, numai 1,07% din utilizatori fac clic pe orice element al expunerii de diapozitive. Din aceste 1,07%, doar o mică parte, (3% sau mai puțin), face clic pe orice diapozitiv, cu excepția primului. Acest lucru ilustrează cât de periculos este să plasați conținut important într-o expunere de diapozitive.
Utilizatorul poate obține o imagine distorsionată a scopului principal al site-ului
Site-ul dvs. ar trebui să ofere utilizatorului o cale clară și evidentă a ceea ce ar trebui să facă. Și dacă slide show-ul interferează cu acest lucru, trebuie să revizuiți strategia pentru această pagină.
Specialiștii din WiderFunnel. angajat în optimizarea conversiei, a verificat eficiența prezentării de diapozitive și a ajuns la următoarea concluzie:
Am testat propunerile rotative de mai multe ori și am ajuns la concluzia că aceasta este o modalitate proastă de prezentare a conținutului.
Utilizatorii de dispozitive mobile nu trebuie să fie încântați
Când să utilizați o prezentare de diapozitive
Când merită să afișați o expunere de diapozitive? Iată câteva sugestii.
Crearea unei impresii generale
Când nu vă pasă, utilizatorul va acorda atenție conținutului unui anumit diapozitiv, dar trebuie să creați o impresie vizuală obișnuită. Pentru acest spectacol de diapozitive se poate potrivi perfect.
Când este ușor să accesați conținutul fără o expunere de diapozitive
De exemplu, pentru a afișa fotografii dintr-o stațiune, muzeu, eveniment sau linie de produse sub forma unei expuneri de diapozitive. Dar dacă site-ul are o galerie foto sau o secțiune de bunuri. În acest caz, este recomandabil să utilizați o expunere de diapozitive.
Pentru a îmbunătăți calitatea generală a site-ului
Utilizați prezentarea de diapozitive ca un element vizual pur, care nu este esențial pentru funcționalitatea site-ului. Până când acest add-on distrage atenția de la un conținut important, totul este în ordine.
Indicatori pentru a crește disponibilitatea
Pentru a face slide show-ul mai accesibil, vom adăuga un număr de controale.
Adăugarea comenzilor de prezentare a diapozitivelor
Butonul Pauză / Redare
Mai întâi, adăugați un buton în HTML:
Iată cum funcționează prezentarea de diapozitive cu butonul de pauză:
Butoanele următoare și anterioare
Mai întâi adăugați butoanele "Next" și "Previous" la codul HTML:
... schimbați acest lucru:
În scriptul de mai sus, am adăugat o funcție goToSlide generală pentru o mai mare flexibilitate. De asemenea, am schimbat matematica în cadrul variabilei CurrentSlide. pentru a exclude numerele negative. Pentru a te testa, selectează un număr pentru diapozitivele lungime și vezi ce se întâmplă cu currentSlide după n modificări.
Acum avem controale de lucru.
Iată cum arată prezentarea de diapozitive cu controale și câteva stiluri suplimentare:
De asemenea, puteți încerca să schimbați stilurile și aspectul comenzilor astfel încât scopul lor să fie foarte clar pentru utilizatori.
Schimbați clasa .slide la proprietatea position: absolute; pe poziție: statică; Astfel, diapozitivele implicite vor fi afișate ca listă.
concluzie
Trimiteți-le prietenilor: