CSS i JavaScript solen associar-se a estil i interactivitat respectivament, però sempre que sigui possible convé utilitzar CSS per a la interactivitat perquè carrega més ràpid i provoca menys reflow, millorant el rendiment.
Estructura HTML mínima per al lliscador
L'estructura és molt senzilla. Crea un contenidor de carrusel i diversos elements slide amb un marcatge com el següent:
<div class=carousel-container><div class=carousel-slide>1</div>...</div>
Estilització bàsica amb CSS
Perquè el contingut sigui desplaçable i mostri diverses targetes a escriptori i una a mòbil, utilitza flex i overflow-x auto. Un exemple resumit:
.carousel-container { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; } .carousel-slide { flex: 1 0 30%; scroll-snap-align: center; } @media (max-width: 600px) { .carousel-slide { flex: 1 0 90%; } }
Explicació de scroll snap
El contenidor utilitza scroll-snap-type amb eix x i mode mandatory per forçar l'encaix a l'element més proper. Cada slide utilitza scroll-snap-align per indicar quina part de l'element ha de quedar visible, per exemple center.
Barra de progrés només amb CSS
Si vols una barra de progrés visual pots aprofitar pseudoelements de scrollbar en navegadors WebKit. Exemple resumit:
.carousel-container::-webkit-scrollbar { height: 8px; } .carousel-container::-webkit-scrollbar-thumb { background: #29AB87; } .carousel-container::-webkit-scrollbar-track { background: #b1b3b399; } .carousel-container::-webkit-scrollbar-track-piece:start { background: #29AB87; }
Important: aquestes regles no són estàndard i no funcionen en tots els navegadors. En navegadors no compatibles la barra apareixerà com una barra normal.
Millores amb JavaScript
Si vols afegir fletxes per navegar i ajustar l'experiència, pots complementar-ho amb un petit script que mogui el scroll per l'amplada d'un slide. Exemple compacte:
const carousel = document.querySelector(.carousel-container); const slide = document.querySelector(.carousel-slide); function handleCarouselMove(positive = true) { const slideWidth = slide.clientWidth; carousel.scrollLeft = positive ? carousel.scrollLeft + slideWidth : carousel.scrollLeft - slideWidth; }
Assigna la funció als botons de fletxa a l'HTML utilitzant onclick per cridar a handleCarouselMove i handleCarouselMove(false) segons correspongui.
Resum i bones pràctiques
Amb CSS pur pots construir un lliscador net, accessible i eficient utilitzant flex, overflow-x i scroll-snap. Afegeix millores opcionals amb JavaScript per a navegació per fletxes, paginació o indicadors personalitzats i considera la compatibilitat de pseudo regles de scrollbar abans d'utilitzar-les en producció.
Sobre Q2BSTUDIO
A Q2BSTUDIO som una empresa de desenvolupament de programari i aplicacions a mida especialitzada en solucions tecnològiques avançades. Oferim serveis de programari a mida i aplicacions a mida per a empreses de tots els sectors. A més, som especialistes en intel·ligència artificial i IA per a empreses, desenvolupant agents IA personalitzats i integracions que potencien processos i presa de decisions.
Els nostres serveis inclouen ciberseguretat integral, serveis cloud AWS i Azure, i serveis d'intel·ligència de negoci que inclouen implementacions amb Power BI per a visualització i anàlisi. Si necessites programari a mida, aplicacions a mida, solucions d'intel·ligència artificial o consultoria de ciberseguretat, Q2BSTUDIO aporta experiència tècnica i enfocament orientat a resultats.
Paraules clau i posicionament
Aplicacions a mida, programari a mida, intel·ligència artificial, IA per a empreses, agents IA, ciberseguretat, serveis cloud AWS i Azure, serveis d'intel·ligència de negoci, Power BI.
Si vols que adaptem aquest lliscador al teu producte o l'integrem amb serveis cloud AWS i Azure, o bé que el connectem a una solució d'intel·ligència de negoci amb Power BI i agents IA, contacta amb Q2BSTUDIO per a una proposta tècnica i econòmica personalitzada.
