Diskuze: Plugin nebo tutoriál na slideshow
Aleš Lulák:6.3.2015 22:57
Ahoj,
no, vlastně by se to tak trošku dalo vyřešit samostatným CSSkem, samozřejmě to není příliš pro praktické využití, ale ze zajímavosti jsem to stejně udělal.
Ukázka: http://jsfiddle.net/frbtxdcv/
Komentář: Funguje to tak, že se zobrazí vždy potomek
elementu s hoverem – tedy potomek je pro nás obsah a rodič je "tlačítko",
což je trošku zvláštní vzhledem k velikostem. Vše je obalené v divu,
který je stejně veliký jako jeho veškerý obsah, jelikož jsou zde použity
relative a absolute pozice, které by nám přímo v DOMu dělali trošku
nepořádek. Při hoveru měním z-index, první slide je stále na vyšším
z-indexu, aby při žádném hoveru byl vidět právě první slide, ale
zároveň je nižší než z-index elementu v hoveru. Také by šel použít
display. Samotné tlačítko jsem vyplnil spanem, aby se lépe stylovalo a
nastavil jsem mu cursor: pointer, což je vlastně trošku zavádějící, ale
na demonstraci to stačí.
Stylování samotného aktivního tlačítka je obdobné jako při zobrazovaní obsahu, tedy když má hover.
Jak jsem psal ihned ze začátku, není to pro praktické použití, protože se nám bude vždy vracet první slide a už vůbec se nám to nemůže střídat automaticky. Takže od tohoto řešení opouštím k dalšímu.
Další řešení je samozřejmě javascript. Klasické řešení je předávat si classu, která nám ukazuje právě aktivní slide, většinou active. Vypujčím si pro příklad jQuery, jelikož jsem línej to psát v čistém javascriptu.
Ihned ze začátku si hlavně udělám lepší strukturu elementů, než v CSS příkladu, sice to ve finále ničemu nevadí, ale pro lepší klid v duši to udělám nějak normálně – dva sloupce.
Ukázka: http://jsfiddle.net/paobey24/
Komentář: Jak je to krátké že? Jednoduše při najetí na
tab se nám vybere jeho data atribut slide a nastaví se mu classa active,
rovněž tak se předá stejné číslo pro obsah, kde se rovněž nastaví
active, což je prostě display active – před celým tímto procesem se
všechny active mažou. Místo data atributů by se dala použít třeba eq()
funkce, která nám vrátí pořadí prvku, ale pro lepší práci bych volil
data atribut.
Když už jsem v první ukázce nakousl, že by se to mohlo střídat automaticky, tak si zde přiděláme v jednoduchém příkladu funkci na střídání.
Ukázka: http://jsfiddle.net/hf697ort/
Komentář: Teď už tam máme navíc nějaké funkce a to
changeSlide, která přijíma číslo slidu, který má být viditelný a
automaticChange, který nám zajišťujě, že se slidy mění sami. V
timeOutech si nastavujeme čas, kdy chceme změnu, jakmile uživatel najede
myší na tab, automatické měnění se vypne pomocí vynulovaní
časovače.
Doufám, že to dává alespoň trochu smysl a pomohlo to.
Aleš Lulák:6.3.2015 23:35
Tak jsem možná i přišel na praktičtější využití CSS příkladu.
Trošku styly přepíšeme a dáme do nich selector target:
#banners .tab#item-1 .content {background-color: blue; top: -0px; display: block;}
#banners .tab#item-2 .content {background-color: green; top: -50px; display: none;}
#banners .tab#item-3 .content {background-color: red; top: -100px; display: none;}
#banners .tab#item-4 .content {background-color: purple; top: -150px; display: none;}
#banners .tab#item-5 .content {background-color: orange; top: -200px; display: none;}
#banners .tab:hover .content {z-index: 20 !important; display: block !important;}
:target .content {z-index: 10; display: block !important;}Teď se nám při předání idéčka, vlastně kotvy, v URL zobrazí daný obsah a pokud nebude nic zadaného, zobrazí se slide první. Přepínání pohybem myši stále funguje.
Tohle mě vede k tomu, že vlastně když si odstraníme :hover a místo původních spanů si vytvoříme odkazy na kotvu, můžeme si měnit obsah pomocí kliknutí a to úplně čistě bez javacriptu, což je už vlastně docela cool!
Aleš Lulák:6.3.2015 23:46
*ještě spam
Vlastně už to nemusí být ani nakóděné ošklivě v sobě, protože nám nejde o hover.
Zobrazeno 4 zpráv z 4.