0 Kč s DPH

Slider v responzivních šablonách

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

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, 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

inPage.cz - webové stránky, doména a webhosting snadno.