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ářů

  • Re: zobrazení Slideru

    3. 3. 2016 9:45:11 | tým inPage

    Dobrý den Jáne,
    u adresy obrázku je uprostřed číslem zapsána jeho velikost, ve vašem slideru používáte velikost 2 (šířka 520px), přepište si tuto velikost na 3 (originální velikost).
    Více v článku: http://www.blog.inpage.cz/inpage/obrazky-inpage-velikost-a-pouziti/

    Adresa obrázku tedy bude vypadat: <img alt="Motiv1" src="/obrazok/3/motiv-n-jpg/">

    Odpovědět | Zobrazit odpovědi

    • Re: Re: zobrazení Slideru

      11. 5. 2019 15:54:44 | Tereza Lhotáková

      Dobrý den,
      vše jsem nastavila dle Vašich pokynů, ale přesto se mi zobrazuje pouze slabý proužek slideru a obrázek v něm není, v čem je chyba? stránky www.vermokom.com
      obrázek mám zapsaný takto, je to správně? Z jakého důvodu se obrázek nezobrazuje?
      <img src="/obrazek/3/IMG_0154.JPG/" alt="Motiv3">

      Děkuji
      Lhotáková

      Odpovědět

  • zobrazení Slideru

    3. 3. 2016 9:36:42 | Ján Mažgút

    Slider jsem si udělal dle vašeho výše popsaného postupu, ale v šabloně ONE se mi slider zobrazuje strašně malý, přitom mám obrázky připravené dle doporučení motivu, Prosím, kde jsem udelal chybu? stranky jsou www.pilous.sk

    Odpovědět