A több oldalból álló, komplexebb portáloknál gyakran előfordul, hogy a nyitólapon feltűnő helyen váltakozó, képi tartalom, ún. képváltós karusszel szerepel. A karusszel tartalma általában néhány másodperc elteltével megváltozik. A hátrányos helyzetű, illetve fogyatékkal élő felhasználók (pl. diszlexiás emberek) számára nem biztos, hogy a váltások között elegendő idő áll rendelkezésre a tartalom elolvasásához, értelmezéséhez. Ezért lehetőséget kell biztosítani a képváltás megállítására, illetve újraindítására.
További gyakori probléma, hogy a karusszel nem kezelhető csak billentyűzet használatával, az aktuális elem jelzése magyarázat nélküli ábrával (pl. pöttyök, amelyek közül az aktuális eltérő színű) történik, illetve csak billentyűzet használata esetén a kezelőszervek bejárási sorrendje nem tükrözi a természetes, balról-jobbra, fentről-lefelé haladási irányt.
Jelen fejezet célja olyan képváltós karusszel bemutatása, amely kiküszöböli ezeket a problémákat. A komponens gyakorlati példájában három virág – egy tulipán, egy rózsa és egy nárcisz – képe váltakozik folyamatosan. A képek alatt az adott virág rövid leírása és sorszáma szerepel, kiegészítve az elemek számával.
<div class="carousel">
A karusszelt magába foglaló terület <div> eleme.
<div class="carousel-tartalom">
A karusszel tartalmi részét magába foglaló terület <div> eleme. A karusszel két részből áll, az első a tartalom, a második a megállításra/újraindításra szolgáló gomb. A megfelelő bejárási sorrend biztosítása érdekében ezek külön-külön <div> elembe kerülnek.
<div class="carousel-bal"><a href="javascript:picPrev();" title="Előző kép"><img src="carouselhcj/img/left.png" alt="Előző kép"></a></div>
A karusszel bal oldala, az előző képre történő lépést biztosító balra mutató nyíl ikonnal. Az előző képre lépés javascripttel van megoldva.
<div id="c1" class="carousel-kozep">
A karusszel középső, érdemi része. Ilyen részből annyi szerepel, ahány kép váltakozik. Fontos, hogy mindegyik rendelkezzen id tulajdonsággal, amely értéke egy c
betűből és egy folyamatosan növekvő sorszámból álljon.
<img class="actpic" src="carouselhcj/kepek/tulipan.jpg" alt="Tulipán"><center><div class="kepalairas">A tulipán (Tulipa) kehelyalakú virággal rendelkező, több színben nyíló, hagymás dísznövény, a liliomfélék (Liliaceae) családjának egy nemzetsége.</div><div>1/3</div></center>
A kép, a képaláírás és a sorszám az összesen belül.
<div id="c2" class="carousel-kozep hidden">
A második képet magába foglaló <div> elem. A class tulajdonság értékei között a "hidden" is szerepel. Az első kivételével az összes <div> elemnek tartalmaznia kell ezt a beállítást. A hidden osztályú elemek nem jelennek meg az oldalon. A váltás úgy van megvalósítva, hogy az aktuális elem osztályai közé felvételre kerül a hidden, majd a következőről, illetve visszafelé léptetés esetén az előzőről eltávolítja a program.
<div class="carousel-jobb"><a href="javascript:picNext();" title="Következő kép"><img src="carouselhcj/img/right.png" alt="Következő kép"></a></div>
A karusszel jobb oldala, a következő képre történő lépést biztosító jobbra mutató nyíl ikonnal. A következő képre lépés is JavaScripttel van megoldva.
<div class="carousel-megallitas">
A karusszel megállítására/újraindítására szolgáló gombot magába foglaló terület <div> eleme.