Karuseli bez JavaScripta? Da, moguće je uz pomoć CSS-a

Zašto bismo uopšte pravili karusel bez JavaScripta?

Više od 50% internet saobraćaja dolazi sa mobilnih uređaja, a brzina učitavanja stranice je direktno povezana sa konverzijama i SEO performansama. Svaki dodatni kilobajt skripte usporava stranicu. U tom svetlu, rešenja bez JavaScripta – tamo gde su moguća – postaju više nego poželjna.

CSS karuseli nisu čarobno rešenje za sve potrebe, ali mogu biti odličan izbor za jednostavne prikaze slika, testemonijala ili mini galerija, posebno kada ne želimo da zavisimo od biblioteka kao što su Slick ili Swiper.

Kako funkcioniše CSS-only karusel?

Glavni trik je korišćenje HTML radija i CSS selektora :checked. Uz pomoć label elemenata i pravilno strukturiranog HTML-a, možemo da kontrolišemo koji slajd je vidljiv – sve bez linije JavaScripta (MDN primer).

Struktura i osnovni kod

<input type="radio" name="carousel" id="slide1" checked>
<input type="radio" name="carousel" id="slide2">
<input type="radio" name="carousel" id="slide3">

<div class="carousel">
  <div class="slides">
    <div class="slide">Slajd 1</div>
    <div class="slide">Slajd 2</div>
    <div class="slide">Slajd 3</div>
  </div>
</div>

<div class="controls">
  <label for="slide1">1</label>
  <label for="slide2">2</label>
  <label for="slide3">3</label>
</div>

.slide {
  display: none;
}

#slide1:checked ~ .carousel .slides .slide:nth-child(1),
#slide2:checked ~ .carousel .slides .slide:nth-child(2),
#slide3:checked ~ .carousel .slides .slide:nth-child(3) {
  display: block;
}

Ovde se koristi kombinacija :checked i ~ (general sibling) selektora da se pokaže odgovarajući slajd. Ovakav pristup je detaljno analiziran i na CSS Tricks portalu.

Responsive dizajn: ključ za UX

Bez obzira na jednostavnost CSS-only rešenja, ne smemo zaboraviti na responsivnost. Evo primera kako da se slajdovi prilagode manjim ekranima:

.carousel .slides {
  display: flex;
  overflow: hidden;
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
}

.slide {
  min-width: 100%;
  box-sizing: border-box;
}

@media (max-width: 600px) {
  .controls label {
    font-size: 14px;
    padding: 8px;
  }
}

Prednosti CSS-only karusela

• Bez JavaScripta: manje resursa, brže učitavanje

• Jednostavno za implementaciju: može se napraviti čak i u HTML emailovima (sa ograničenjima)

• SEO friendly: sadržaj se nalazi direktno u DOM-u

Ograničenja CSS-only karusela

Naravno, CSS ima svoja ograničenja:

• Nema automatske promene slajdova (osim uz eksperimentisanje sa @keyframes, što nije uvek pouzdano)

• Nema dinamičkog dodavanja slajdova

• Nema podrške za kompleksne kontrole (npr. swipe, pauza na hover, itd)

Ukoliko vam je potrebna kompleksnija logika, ipak će biti neophodan JavaScript.

Kada koristiti CSS-only pristup?

Ovo su situacije kada CSS-only rešenje ima najviše smisla:

• Statične galerije bez potrebe za dinamikom

• Sažeti prikaz sadržaja u blogovima, prezentacijama ili mini landing stranicama

• Kada je brzina učitavanja prioritet

Ako želite da naučite više o responsive pristupima, pročitajte i 7 razloga ZA responsive web dizajn.

Praktični primer: Testemonijali

Karuseli sa izjavama korisnika su odličan primer kada je CSS-only pristup više nego dovoljan. Tipično imamo 2–3 rečenice po izjavi i nekoliko korisnika. Dodavanjem animacija u CSS-u i pametnim stilizovanjem, efekat može biti veoma elegantan.

.slide {
  transition: opacity 0.3s ease-in-out;
  opacity: 0;
}

#slide1:checked ~ .carousel .slides .slide:nth-child(1),
#slide2:checked ~ .carousel .slides .slide:nth-child(2),
#slide3:checked ~ .carousel .slides .slide:nth-child(3) {
  opacity: 1;
}

Karuseli napravljeni isključivo uz pomoć CSS-a su sjajan alat kada imamo jednostavne potrebe i želimo maksimalne performanse. Neće zameniti sve funkcionalnosti koje JavaScript može da pruži, ali mogu biti više nego dovoljni u mnogim realnim scenarijima.

Ako radite na optimizaciji sajta, razmislite – da li vam je zaista potreban JS karusel?

Ukoliko želite profesionalnu pomoć u optimizaciji sajta, slobodno pogledajte našu uslugu izrade sajtova i SEO optimizaciju, ili pročitajte Šta je SEO – pomoći ćemo vam da postignete maksimalnu brzinu i efikasnost.