Slider webstránky

Poznámka: Kód pre slider (rovnako ako menu) v predchádzajúcej lekcii nie je potrebné poznať a písať spamäti, skôr chápať významu jednotlivých položiek a tried.

Slider webstránky predstavuje dynamické opakovanie sa obrázkov (alebo iného obsahu) idúcich po sebe. Väčšinou sa umiestňuje navrch webstránky a obsahuje v sebe informácie, na ktoré chceme používateľa najviac upozorniť.

No slider môže slúžiť aj na zobrazenie partnerov, referencií, článkov blogu, projektov alebo ľubovoľného obsahu podľa potreby.

Existuje viacero druhov sliderov, no my využijeme ten, čo nám priamo ponúka Bootstrap a je využívaný na väčšine webstránok.

Vytvorenie slideru

V prvom kroku si vytvor element div (súvislá sekcia), do ktorej priradíme slider, ktorému priradíme identifikátor #myCarousel. Triedy .carousel .slide sú preddefinované triedy Bootstrapu a je potrebné ich pri slideri vždy definovať.

<div id="myCarousel" class="carousel slide" data-ride="carousel">
  ...
</div>

Definovanie počtu slidov v slideri

Slider môže obsahovať 2 až ľubovoľný počet obrázkov alebo slidov. Môže samozrejme aj jeden, ale to by pre nás nemalo žiadny význam, keďže túto funkciu plní statický obrázok.

Aby sme mohli položky slideru posúvať, potrebujeme indikátor (predstav si napríklad guličky naspodku slidera), kotrý vytvoríme pomocou číslovaného zoznamu <ol></ol>, v ktorom sa nachádza zoznam v tagoch <li></li>.

<ol class="carousel-indicators">
  <li data-target="#myCarousel" data-slide-to="0" class=""></li>
  <li data-target="#myCarousel" data-slide-to="1" class="active"></li>
</ol>

Koľko položiek <li></li> máš definovaných, toľko slidov bude tvoj slider obsahovať (v mojom príklade má slider 2 slidy).

Upozornenie: Je dôležité aby atribút data-target obsahoval názov nášho identifikátora, ktorý sme slideru priradili a znak #. Význam znaku si vysvetlíme v nasledujúcih lekciách.

Trieda .active definuje, ktorý slide sa zobrazí ako prvý pri prvom načítaní webstránky (v mojom príklade je to slide číslo 2).

Upozornenie: V programovaní väčšinou začíname vždy indexom a číslami od 0. Preto je dôležité aby aj v tvojom príklade atribút data-slide-to začínal 0.

Finálne náš slider vyzerá zatiaľ takto:

<div id="myCarousel" class="carousel slide" data-ride="carousel">
  <ol class="carousel-indicators">
    <li data-target="#myCarousel" data-slide-to="0" class=""></li>
    <li data-target="#myCarousel" data-slide-to="1" class="active"></li>
  </ol>
</div>

Vytvorenie konkrétneho obsahu v slide

Obsah v daných slidoch definujeme v triede .carousel-inner.

<div class="carousel-inner">
....
</div>

Pridanie položky do slideru

Do vytvoreného div elementu následne pridáme položky slideru. Počet položiek sa musí zhodovať s počtom slidov definovaných v našom <ol></ol> zozname (čiže v mojom príklade budú 2).

<div class="item">
  Slide 1
</div>

<div class="item">
  Slide 2
</div>

Do div elementu s triedou .item, pridáš konkrétny obsah.

  1. Obrázok (tvoraci pozadie v slideri)
  2. Nadpis
  3. Podnadpis

Vloženie obrázku

Obrázky sa v HTML vkladajú pomocou <img /> tagu. 

<img class="first-slide" src="" alt="Popis obrázku">

Trieda .first-slide nie je povinná, no pomôže ti lepšie identifikovať, že sa jedná o prvý obrázok v slideri.

Poznámka: Názov triedy môže byť ľubovoľný, no pre jednotnosť tutoriálu, prosím používajte rovnaké názvoslovie pre triedy aj identifikátory.

Upozornenie: Pri práci s obrázkami na webstránkach si musíš dávať pozor na licenciu. Vždy je potrebné mať overený zdroj, odkiaľ obrázky sťahuješ a taktiež, či je povolené ich voľne na webstránke použiť. Zoznam voľne dostupných obrázkov sa nachádza dobre spísaný na blogu Websupportu.

src atribút nám definuje odkiaľ sa k obrázku dostaneme. Obrázok môže byť:

  1. z Webu - zadáme mu link na url adresu. <img src='http://www.example.com/' />
  2. z nášho priečinku, ktorý sme si vytvorili na začiatku (priečinok img). <img src='img/nazov_obrazku.png' />

Úloha

  1. Ak máš pripravené do slideru vlastné obrázky ladiace s obsahom použi tie, inak si stiahni vzorové obrázky.
  2. Vlož obrázky do priečinka img v priečinku htmlkurz2016. Vieš obrázky prekopírovať alebo presunúť aj pomocou príkazového riadku? Ak áno, tak si to skús priamo cez konzolu (terminál).
  3. Choď späť do súboru index.html.
  4. Do elementu <div class='item'></div> vlož nový element <img /> a priraď doň prvý obrázok.
  5. Priraď obrázku popis v atribúte alt

Vloženie nadpisu

Nadpis vložíme do hlavného <h1></h1> elementu. Nadpisy v HTML môžu byť v 6tich úrovniach podľa dôležitosti. <h1></h1> reprezentuje väčšinou hlavný nadpis.

Typy nadpisov:

  1. <h1></h1>

    Nadpis h1

  2. <h2></h2>

    Nadpis h2

  3. <h3></h3>

    Nadpis h3

  4. <h4></h4>

    Nadpis h4

  5. <h5></h5>
    Nadpis h5
  6. <h6></h6>
    Nadpis h6

Obalenie obsahu v slideri

Keďže chceme, aby obsah v slideri bol vždy nacentrovaný v strede, je potrebné použiť dve html elementy a triedy navyše.

<div class="container">
  <div class="carousel-caption">
  ...
  </div>
</div>

S triedou .container sme už pracovali v sekcii Twitter Bootstrap. Vďaka nej bude text zarovnaný do bloku.

Druhá trieda .carousel-caption (názov je ľubovoľný, no nechaj ho zhodný s tutoriálom) nám vytvorí box okolo obsahu, ktorý bude v slideri (Nadpisu a podnadpis), čo nám umožní obsah centrovať a pracovať s ním ako celkom.

Nadpis

Do div elementu s triedou .carousel-caption vlož tvoj hlavný nadpis v tagu <h1></h1>.

<h1>Vitajte na mojom webe!</h1>

Podnadpis

Pod hlavný nadpis, vlož podnapis. Na zobrazenie bežného textu slúži tag <p></p>.

Poznámka: Nie vždy je pravidlom ukladať text do tagu <p></p>. Text môžeme ukladať aj do <div></div>, <label></label>, <span></span> alebo iných html elementov.

'p' je odvodené zo slova paragraph

<p>Som programátorka, ktorá má rada hady :)</p>

Finálne náš text v slideri vyzerá nasledovne:

<div class="container">
  <div class="carousel-caption">
    <h1>Vitajte na mojom webe!</h1>
    <p>Som programátorka, ktorá má rada hady :)</p>
  </div>
</div>

A slide1 vyzerá nasledovne:

<div class="item">
  <img class="first-slide" src="img/slide1.jpg" alt="Popis obrázku" />
    <div class="container">
      <div class="carousel-caption">
        <h1>Vitajte na mojom webe!</h1>
        <p>Som programátorka, ktorá má rada hady :)</p>
      </div>
    </div>
</div>

Úloha

  1. Zopakuj si tento istý postup pre ďalšie položky v slideri. Ak stíhaš alebo si doma, napíš kód sama, nekopíruj ho z predchádzajúcej položky.
  2. Čo myslíš sa stane s triedou .active, ktorú sme definovali na začiatku v <ol></ol> zozname?

Finálny slider

Finálny slider vyzerá pre slidy s 2-ma položkami nasledovne. Skús si otvoriť v prehliadači index.html, či aj u teba funguje všetko správne.

<div id="myCarousel" class="carousel slide" data-ride="carousel">
  <ol class="carousel-indicators">
    <li data-target="#myCarousel" data-slide-to="0" class=""></li>
    <li data-target="#myCarousel" data-slide-to="1" class="active"></li>
  </ol>

  <div class="carousel-inner" role="listbox">
    <div class="item">
      <img class="first-slide" src="img/slide1.jpg" alt="Popis obrázku">
      <div class="container">
        <div class="carousel-caption">
          <h1>Vitajte na mojom webe!</h1>
          <p>Som programátorka, ktorá má rada hady :)</p>
        </div>
      </div>
    </div>
    <div class="item active">
      <img class="second-slide" src="img/slide2.jpg" alt="Popis obrázku">
      <div class="container">
        <div class="carousel-caption">
          <h1>Chceš vedieť lepšie HTML?</h1>
          <p>Poď programovať s nami.</p>
        </div>
      </div>
    </div>
</div>
</div>