0 Kč s DPH

Slider v responzivních šablonách  (návod pro pokročilé)

15. 07. 2015

Využitím hotového frameworku Bootstrap v nových responzivních šablonách Slide a One se naskytla možnost vložení vlastního slide motivu.

Již není třeba složitě nahrávat scripty sliderů na ftp a napojovat se na ně z kódu stránek. Nyní stačí vložit pouze kód slideru a upravit adresu obrázků.

Obrázky pro slider

Nejdříve si připravíme obrázky pro motiv. Obrázky musí mít minimální šířku, která se liší v závislosti na použité šabloně, aby byl roztažený po celé šířce slideru. Slider je plně responsivní, což znamená že se jeho velikost přizpůsobuje použitému zařízení (tablet, mobil).

Minimální šířka obrázků:

šablona ONE 2000px
šablona SLIDE 1170px
šablona HANAMI 1920px
šablona KYRA 1920PX

Dříve než nahrajete obrázky do administrace, je vhodné upravit jejich názvy např. na motiv1.jpg, motiv2.jpg atd. Úprava adres obrázků v kódu slideru bude pro vás poté jednodušší.

Připravené obrázky nahrajte do administrace inpage a pokračujte vložením zdrojového kódu pro slider.

Zdrojový kód slideru

Vytvořte stránku Vlastní motiv, nastavte ji jako neaktivní a vypněte zobrazení WYSIWYG editoru, anebo si změňte typ editoru na HTML Editor, stránku uložte a znovu otevřete.

Vytvoření stránky vlastní motiv

nastavení stránky s vlastním motivem

Pozor: WYSIWYG editor musí být na stránce vypnutý, jinak se slider nezobrazí správně.

Do stránky zkopírujte níže uvedený kód, který si následně vysvětlíme. Dbejte na zkopírování kódu od prvního znaku (tagu) <div .., po poslední </div>

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
  <!-- Stránkování -->
  <ol class="carousel-indicators">
    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
    <li data-target="#carousel-example-generic" data-slide-to="1"></li>
  </ol>

  <!-- Bloky s obrázky -->
  <div class="carousel-inner" role="listbox">

    <div class="item active">
      <img src="/obrazek/3/motiv1-jpg/" alt="Motiv1">
      <div class="carousel-caption">
        <h3>Nadpis prvního obrázku</h3>             
        <p>Text prvního obrázku</p>
      </div>
    </div>

    <div class="item">
      <img src="/obrazek/3/motiv2-jpg/" alt="Motiv2">
      <div class="carousel-caption">
        <h3>Nadpis druhého obrázku</h3>             
        <p>Text druhého obrázku</p>
      </div>
    </div>

  </div>

  <!-- Šipky -->
  <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

Kód slideru se skládá ze tří částí:

  1. stránkování, což jsou body, které nám ukazují počet obrázků a právě zobrazený obrázek slideru.
  2. bloky s obrázky, které začínající tagem <div class="item"> a končí </div>. Každý obrázek může mít nadpis a text. Nadpis se zapisuje mezi tagy <h3> </h3> a popisek <p> </p>.
  3. poslední částí jsou šipky, které jsou na stranách motivu.

Vložení obrázků do motivu

Pro použití obrázků stačí upravit jejich adresy a počet bloků.

Adresa obrázku motivu

Adresy obrázků upravíme v druhé části kódu Bloky s obrázky. Pokud jste si obrázky připravili dle příkladu výše, adresa bude motiv1-jpg, motiv2-jpg atd. Jinak je možné zjistit název obrázku nahlédnutím do sekce Obrázky > Editace obrázku Editace obrázku  > Optimalizace pro vyhledávače

Samotný obrázek je do slideru vložen větou <img src="/obrazek/3/motiv1-jpg/" alt="Motiv1">, kde upravíme jeho adresu v části src="/obrazek/3/motiv1-jpg/".

Počet obrázků motivu

Počet obrázků upravíme zkopírováním nebo smazáním celé části od <div class="item"> po </div>.

Počet teček v části "stránkování"

S počtem obrázků souvisí i počet teček v části stránkování, kde je třeba přidat nebo odebrat řádek kódu, dle počtu obrázků. Opět stačí zkopírovat či smazat řádek začínající <li> a končící </li>. Jedinné co je třeba upravit je vlastnost atributu data-slide-to="1", kde upravíte číslo pořadí obrázku.

Motiv na webu

Teď už zbývá motiv zobrazit na webu. Uložte provedené změny a v Nastavení > Prvky stránek > Vlastní box motiv vyberte vytvořenou stránku s motivem a zobrazte si náhled webu.

Petra Jordánová
Technická podpora inPage.cz
admin(zav)zoner.cz

Přidat komentář

Přehled komentářů

  • slider nefunguje

    8. 7. 2017 10:50:08 | Elena Jamrich Hadvigová

    Dobrý deň...neviem, kde je chyba, ale slider mi nejde...mám len úzky rámik bez obrázkov. Ďakujem za pomoc. šablóna slide ....www.malbanastenu.sk

    Odpovědět | Zobrazit odpovědi

    • Re: slider nefunguje

      10. 7. 2017 14:05:01 | Tým inPage

      Dobrý den,
      chybku jsem opravila, měla jste špatně vložené odkazy pro obrázky a jeden jste měla rozdílně pojmenovaný, než jaky byl odkaz u obrázku ve slideru. V případě dalších problému pište na admin@zoner.cz

      Odpovědět

  • Odkaz ze slideru

    4. 3. 2017 21:45:34 | Jiří Modr

    Zdravím všechny samouky ;o)
    Já jsem navíc řešil, jak do slideru dát navíc odkaz na odpovídající oblast mých stránek (může být i jinam), s podporou administrátorů jsem dospěl k tomuto funkčnímu tvaru ;o) (využívám šablonu ONE)

    ukázka výseku kódu z blogu výše

    *****
    ...
    <div class="item active">
    <img src="/obrazek/3/motiv1-jpg/" alt="Motiv1">

    <a href="/fotogalerie/" title="Kókněte na fotogalérii">
    <div class="carousel-caption">
    <h3>Krásné fotky</h3>
    <p>rozcestník fotoalb</p>
    </div>
    </a>

    </div>

    <div class="item">
    <img src="/obrazek/3/motiv2-jpg/" alt="Motiv2">

    <a href="https://www.google.cz/" title="Stréc Gůglů">
    <div class="carousel-caption">
    <h3>Najdi nepoznané</h3>
    <p>gdo gůglí, má za tři</p>
    </div>
    </a>

    </div>
    ...
    *****

    Umístění odkazů (tagy <a href=...> a </a> jinam vedlo k nefunkčnosti odkazu nad středem slideru, rozhození písma pospisků obrázku apod. ;o)

    Tak se třeba někomu někdy hodí ;o)

    JIM, www.klik-klap.cz

    Odpovědět

  • Výška slideru

    27. 10. 2016 20:29:34 | Gita

    Dobrý den, prosím, jaká by měla být výška?
    V mobilním zařízení mám od sliderem bílou plochu.
    Výšku mám 660px

    Odpovědět | Zobrazit odpovědi

    • Re: Výška slideru

      31. 10. 2016 13:10:54 | Tým inPage

      Dobrý den,
      záleží na konkrétní šabloně. Pro šablonu Hanami je ideální výška úvodního motivu (nebo slideru) 500 px, pro One a Slide 390 px. V případě problémů tohoto typu, doporučuji zaslat dotaz na admin@zoner.cz s uvedením, jakého webu se dotaz týká, ideálně i s printscreenem problému.

      Odpovědět

  • Rychlost a pořadí obrázků ve slideru

    19. 10. 2016 11:43:18 | Miroslav Loffaj

    Dobrý den,
    jde nějak upravit rychlost střídání obrázků, popř. nastavit náhodné pořadí ?

    Odpovědět | Zobrazit odpovědi

    • Re: Rychlost a pořadí obrázků ve slideru

      24. 10. 2016 17:23:47 | Tým inPage

      Dobrý den,

      rychlost střídání obrázků lze upravit pomocí vlastních stylů CSS vložením kódu:
      .carousel-inner > .item {
      transition: .2s ease-out left;
      }
      Hodnota .2s je rychlost střídání sliderů, takže pokud použijete hodnotu 1.2s rychlost střídání se výrazně zpomalí.

      Nastavit náhodné pořadí obrázků nastavit nelze.

      Odpovědět

  • Responzivnost Slideru

    20. 9. 2016 7:45:50 | Zbyhněv Cmiel

    Dobrý den-
    Mám ještě připomínku k responzivnosti slideru.
    Na všech zařízeních včetně např. mobilu se mi slider roztáhne na celou šířku obrázku. Na mobilu to nevypadá přiliš pěkně, když se nahoře zobrazí obrázek např. 1920/800. Nedá se s tím něco udělat, aby se zobrazoval výřez obrázku, nebo mám něco špatně?
    Hanami, tojedesign.cz
    Děkuji.

    Odpovědět | Zobrazit odpovědi

    • Re: Responzivnost Slideru

      23. 9. 2016 8:43:41 | Tým inPage

      Dobrý den,
      jednou z možností, jak dosáhnout tohoto efektu, je vložit přes vlastní styly CSS obrázek jako pozadí určitého prvku (např. divu, kterému nadefinujete rozměry). Příklad zápisu CSS kódu pro zajištění responzivity tímto způsobem:
      #id-divu {
      background-image: url(/obrazek/3/fotka-jpg/);
      background-size: cover;
      background-repeat: no-repeat;
      }

      Odpovědět

  • Zobrazení slideru

    18. 9. 2016 23:56:49 | Zbyhnev Cmiel

    Slider jsem udělal dle téhoto návodu a bohužel se mi nezobrazuje.
    V šabloně HANAMI na stránkách www.tojedesign.cz
    Prosím, kde jsem udělal chybu?

    Odpovědět | Zobrazit odpovědi

    • RE: Zobrazení slideru

      20. 9. 2016 9:28:15 | Tým inPage

      Dobrý den, jsme rádi, že jste problém vyřešil (šlo o chybku v názvu obrázku).

      Odpovědět

  • RE: Hanami

    30. 5. 2016 11:18:39 | tým inPage

    Dobrý den Martine,
    pro šablonu Hanami bude stačit max. šířka 1920px.

    Odpovědět

  • Hanami

    30. 5. 2016 11:09:09 | Martin Svoboda

    Dobrý den, jaký rozměr obrázku do šablony Hanami?
    Díky

    Odpovědět

  • RE: V jiných šablonách...

    11. 3. 2016 8:24:02 | tým inPage

    Dobrý den, v nových šablonách ONE, SLIDE a HANAMI jsou již obsaženy soubory, které dovolují jednoduché použití tohoto slideru. Ve starších šablonách by slider nefungoval. Je možné nechat si od nás vytvořit slider i na starší šabloně, kdy na web přidáme vše potřebné a slider vhodně umístíme, nicméně spíše doporučuji modernizaci webových stránek.

    Odpovědět

  • V jiných šablonách ...

    11. 3. 2016 6:59:32 | Vladislav Kubica

    Přeji pěkný den. V jiných šablonách tento slider nelze použít? Máme stránky www.salonnefertiti.cz a chtěli bychom, aby se nám ten hlavičkový obrázek měnil. Děkuji předem za odpověď.

    Odpovědět