Co potřebujeme?
na. Přestože pro práci se soubory .html nepotřebujeme instalovat místní server, doporučuji nainstalovat jeden, aby byly všechny naše soubory uspořádány v adresáři a aby bylo možné pracovat pohodlněji, pokud později budeme chtít přidat kód PHP, v tomto případě já bude používat Xampp Server, můžete stáhnout z https: //www.apachefr… g / es / index.html
b. Protože budeme dělat snímek, budeme potřebovat obrázky, které na něj umístíme, všechny musí mít přesně stejnou velikost v pixelech, použiji nějaké s velikostí 1200 X 600.
C. Editor kódu podle vašeho výběru, v tomto případě použiji jeden s názvem "Závorky".
Začněme …
1. Protože jsme nainstalovali Xampp, jdeme do adresáře "C: / xampp / htdocs" a vytvoříme novou složku, v tomto případě ji nazvu "SliderShow_main"V něm vytvořím další složku a zavolám ji "Snímky", tam umístím obrázky, které použiji v slideshow.
Kliknutím na obrázek jej zvětšíte
2. Nyní otevřeme náš editor kódu, přejdeme do nabídky "Soubor> Nový".
Kliknutím na obrázek jej zvětšíte
A do tohoto nového souboru napíšeme kód Základní HTML.
Kliknutím na obrázek jej zvětšíte
Tento soubor uložíme s příponou (.html) do složky, kterou jsme vytvořili v kroku 1 "SliderShow_main".3. Později přidáme název souboru a odkazy na soubory Bootstrap a jquery, které budeme potřebovat, aby náš posuvník fungoval správně, máme dvě možnosti, můžeme tyto soubory stáhnout a mít je ve složkách na našem webu v rámci lokálního serveru nebo je můžeme přidat z webu, což by nám ušetřilo místo na našem serveru. Vyberu si druhou možnost, jak na to, uvidíte na dalším obrázku …
Kliknutím na obrázek jej zvětšíte
4. Později přidáme do těchto dvoudo které přiřadíme třídy „kontejner“ a „col-md-12“ v tomto pořadí …
ZVĚTŠIT
Kliknutím na obrázek jej zvětšíte
Tihle dvakteré přidáme, bude sloužit tak, aby se náš posuvník zobrazoval nad všemi dostupnými místy na naší obrazovce.5. Nyní, když jsme připravili náš kód, začneme přidávat prvky, ze kterých bude snímek vypadat, uvidíme …
Kliknutím na obrázek jej zvětšíte
Jak vidíte, přidali jsme novýkterému říkáme „carousel_1“ a přiřadíme 2 třídy bootstrapu s názvem „carousel“ a „slide“, všimněte si, že oba jsou odděleny mezerou, navíc aby snímek fungoval, je nutné přidat atribut (data-ride = "kolotoč").6. V předchozí vrstvě přidáme seřazený seznam se třídou „kolotoč-indikátory“, který nám pomůže přidat množství indikátorů odpovídajících našim obrázkům, v tomto případě použijeme tři obrázky, takže budeme mít tři indikátory počínaje „0“.
Kliknutím na obrázek jej zvětšíte
Všimněte si, že7. Nyní přidáme položky s obrázky, které se zobrazí, podívejme se na kód, ve kterém najdete další podrobnosti …
ZVĚTŠIT
Kliknutím na obrázek jej zvětšíte
Poté, co jsme napsali vše, co souvisí s první položkou, jednoduše zkopírujeme a vložíme podle množství položky, kterou potřebujeme, s přihlédnutím k tomu, že musíme změnit cestu obrázku a že ostatní položky nesmí obsahovat třídu „aktivní“ .
ZVĚTŠIT
Kliknutím na obrázek jej zvětšíte
Jak vidíte, již jsme přidali 3 položky s našimi 3 obrázky a náš kód je funkční, ale nyní přidáme ovládací prvky (Prev & Next) pro pohyb tam a zpět mezi našimi obrázky a také přidáme některé ikony. Ponecháme náš konečný kód následovně …
ZVĚTŠIT
Kliknutím na obrázek jej zvětšíte
Pokud postupujeme správně, v našem prohlížeči vidíme následující výsledky …
ZVĚTŠIT
Kliknutím na obrázek jej zvětšíte
Líbil se vám tento návod a pomohl mu?Autora můžete odměnit stisknutím tohoto tlačítka, čímž mu dáte kladný bod
Pomohl vám tento návod?
Pokud nePOMOC VYLEPŠIT TENTO NÁVOD!
Myslíte si, že můžete tento návod opravit nebo vylepšit? Svou edici můžete odeslat se změnami, které považujete za užitečné.Tento tutoriál upravilo 0 uživatelů. Upravte a staňte se uznávaným odborníkem!
Upravit tento návod
PODOBNÉ NÁVODY
Vlastnosti a atributy formulářů HTML5HTML5 a CSS3: Atributy vztahů a CSS3První kroky HTML5 a CSS3: Společné prvky ve Web DesignŠablona receptu s HTML5 a CSS3HTML5 a CSS3: První krokyVytvořte Twitter kartu pro uživatele používající HTML5 a CSS3Vodorovná lišta s efektem vznášení v html5, css3 a bootstrapZískejte souřadnice klienta pomocí Google Maps API v JavaScriptu (HMTL5, CSS3 a Bootstrap)
18 komentářů
Juan Carlos
25. srpna 2015 11:08
Abych vám nepřinesl kladný bod. Skvělý tutoriál, budeš dělat víc Ronnyho ???
díky za tvůj návod.
- Zpráva
Nestor 1
25. srpna 2015 11:34
Také se mi líbil tutoriál, díky Ronny, jen jedna otázka: Máte soubor zip, který by vzal příklad kódu? Bylo by skvělé, kdybyste na to měli chuť. Děkuju!!
- Zpráva
Alexandr Teba
25. srpna 2015 16:26
Skvělý efekt. Analyzuji to.
Připojuji se k tomu, co říkají ostatní, kdybyste měli k testování soubor s kódem, bylo by to skvělé.
Děkuju
- Zpráva
Ronny Bonillo
25. srpna 2015 16:54
Dobré ráno, přátelé, díky za podporu, je skvělé, že se vám to líbilo, protože je to jeden z mých prvních 3 tutoriálů na tomto webu a opravdu jsem nečekal tak rychlé odpovědi, pokud jde o vaši otázku Juan Carlos, samozřejmě ano. zde na chvíli každý týden zveřejňuji nové návody Doufám, že se vám budou líbit a že mě podpoříte svými komentáři a hodnocením … Zdravím z Venezuely …
- Zpráva
Ronny Bonillo
25. srpna 2015 16:58
Nestor1, vítej, děkuji za komentář! Pokud jde o vaši otázku, doporučuji vám, abyste se brzy vrátili, protože v příštích několika hodinách bude obsah tohoto kurzu aktualizován přidáním .zip na konci, abyste si mohli stáhnout kód.
- Zpráva
Eneko
25. srpna 2015 17:06
Nestor1, vítej, děkuji za komentář! Pokud jde o vaši otázku, doporučuji vám, abyste se brzy vrátili, protože v příštích několika hodinách bude obsah tohoto kurzu aktualizován přidáním .zip na konci, abyste si mohli stáhnout kód.
Budu také pozorný, efekt je velkolepý a je úžasný. Díky předem.
- Zpráva
Ronny Bonillo
25. srpna 2015 17:07
Nemáš zač, Eneko …
- Zpráva
Alexandr Teba
25. srpna 2015 17:13
Dobré ráno, přátelé, díky za podporu, je skvělé, že se vám to líbilo, protože toto je jeden z mých prvních 3 tutoriálů na tomto webu a opravdu jsem nečekal tak rychlé odpovědi na vaši otázku, Juan Carlos, samozřejmě že budu. zde na chvíli každý týden zveřejňuji nové návody Doufám, že se vám budou líbit a že mě podpoříte svými komentáři a hodnocením … Zdravím z Venezuely …
Jak rychle !!
Díky Ronny, nevíš, jak je pro mě dobré, že jsi ten kód sdílel.
Moc děkuji vývojáři!
ps: sleduji tě.
- Zpráva
Ronny Bonillo
25. srpna 2015 17:19
nemáš zač, alejandro, díky za podporu!
- Zpráva
Nestor 1
25. srpna 2015 17:25
Nestor1, vítej, děkuji za komentář! Pokud jde o vaši otázku, doporučuji vám, abyste se brzy vrátili, protože v příštích několika hodinách bude obsah tohoto kurzu aktualizován přidáním .zip na konci, abyste si mohli stáhnout kód.
Velice vám děkuji za připojení souboru Ronny. A vítejte v Solveticu.
- Zpráva
Carlos Sanz
2. září 2015 16:14
Testuji to, děkuji za připojení Ronnyho.
- Zpráva
Ronny Bonillo
2. září 2015 21:43
nemáš zač, Carlosi
- Zpráva
Fiore nella
08. září 2015 16:25
Děkuji za přílohu !! skvělý.
- Zpráva
Ronny Bonillo
08. září 2015 16:37
Nemáš zač, Fiore 
- Zpráva
Reneé Toapanta García
2. června 2016 21:58
Dobré ráno, téma je velmi elegantní, ale nemohu ho stáhnout, znovu a znovu mě žádá, abych se identifikoval, a už mě odtud nepustí. Pokud mi můžete pomoci, děkuji vám milion.
- Zpráva
Julio Martinez
Července 262021-2022 20:03
Nevidím soubor .zip, abych viděl kód
- Zpráva
aldo1982
Července 292021-2022 05:22
velmi dobré, ale nevidím .zip ke stažení kodexu.
Slds
- Zpráva
Manelly
Září 132021-2022 12:58
Dobrý…
Super vysvětlení a prezentace Ronny Stejné jako poslední komentující … Kde je odkaz na stažení kódu?
S díky a pozdravy,
Nelly.
- Zpráva
- Vytvořit účetZaregistrujte se ZDARMA a získejte svůj účet SolveticZaregistrujte si účet
- IdentifikovatMáte již účet? Přihlaste se zdeIdentifikujte mě na mém účtu
