Navrhli jste svůj web a udělali jste ho krásným pomocí CSS. Zbývá přidat interaktivitu a projekt můžete přidat do svého portfolia.

Na webu můžete „oživit“ cokoliv: menu, modální okna, nákupní košík, stránkování. V tomto článku se podíváme na posuvník a uvidíme, jak to udělat v čistém JavaScriptu. Posuvník je užitečný pro sekci s recenzemi, fotografiemi zaměstnanců, obrázky produktů nebo čímkoli jiným – vše závisí pouze na vaší fantazii a projektu.

☝ Ukážeme pouze jednu z možných možností. Toto není referenční řešení a ve vývoji neexistuje jediný správný způsob, jak problém vyřešit. Ale kód rozhodně funguje, takže si ho můžete zkopírovat do svého projektu.

Příklad jednoduchého posuvníku v čistém JavaScriptu

Viz pero bez názvu od Feizerr (@feizerr) na CodePen.

Co se tam děje

  1. Hledáme kontejner posuvníku, tlačítka a obrázky v značce HTML. Vše zapisujeme do proměnných.
  2. Najděte celkový počet snímků. Poté vytvoříme proměnnou slideIndex a nastavíme ji na 0 – to je index aktivního snímku
  3. K tlačítkům přidáváme obslužné rutiny událostí, které reagují na kliknutí uživatele.
  4. Když uživatel klikne na tlačítko .prev, přepneme se na předchozí snímek (pokud aktuální snímek není první) a aktualizujeme zobrazení posuvníku.
  5. Když uživatel klikne na tlačítko .next-button, přepneme se na další snímek (pokud aktuální snímek není poslední) a aktualizujeme zobrazení posuvníku.
  6. Funkce updateSlider() aktualizuje zobrazení posuvníku, přičemž zobrazuje pouze aktuální snímek a skrývá ostatní.
  7. Když se stránka načte, zavoláme updateSlider() k zobrazení prvního snímku a nastavíme posuvník, abychom mohli začít.

Tento kód lze donekonečna měnit a upravovat: upravte animaci, odstraňte smyčku nebo přizpůsobte posuvník. Nebo můžete použít náš příklad, abyste pochopili, jak posuvník funguje, a poté napište svůj vlastní kód – ještě jednodušší a čistší.

Oblíbené knihovny pro posuvníky

Pokud potřebujete posuvník tady a teď, ale nechcete ho psát od začátku a výše uvedený příklad není vhodný, použijte knihovny.

Úhledný

Flexibilní knihovna pro adaptivní posuvníky. Zde můžete nastavit zobrazení jednoho nebo více snímků, povolit automatické přepínání a nastavit rychlost výměny snímků, povolit líné načítání, konfigurovat šipky a stránkování.

Swiper

„Nejmodernější mobilní dotykový posuvník“ je to, co vývojáři říkají o své knihovně. Má plynulé přechody, 3D animace, automatické přepínání snímků, stránkování a navigaci. Existují také flexibilní rozvržení: můžete umístit snímky do více řádků, přidat více snímků do sloupce a ovládat vzdálenost mezi snímky.

ČTĚTE VÍCE
Jak správně aplikovat pudr pro objem vlasů?

Soví kolotoč

Snadno použitelná knihovna vhodná i pro začátečníky. Podporuje různé přechody a animace, nechybí nastavení automatického přepínání snímků a stránkování.

Glide.js

Lehká a rychlá knihovna: se všemi funkcemi váží pouze 28 KB (8 KB komprimováno). Zároveň není nutné vše zapojovat – nepotřebné moduly lze odstranit a pak to bude ještě jednodušší.

Parametrů je mnoho. Můžete nastavit automatické rolování, přidat animace, určit minimální vzdálenost pro změnu snímku, povolit smyčkování. Téměř vše je stejné jako v jiných knihovnách.

Jakou knihovnu použijete, je jen na vás. Každý z nich má jasnou dokumentaci s příklady kódu; budete přesně rozumět tomu, jak vytvořit posuvník. A každý má flexibilní nastavení. Vyzkoušejte si proto práci s každou knihovnou nebo se jen podívejte na ukázky a vyberte si tu, která se vám nejvíce líbí a vyhovuje vám.

Chcete-li vytvořit posuvníky jakékoli složitosti a obecně cokoli na webu, přijďte k profesi „vývojář JavaScriptu“.

Související materiály

  • Vyplatí se dělat posuvníky pomocí CSS?
  • 9 JavaScriptové knihy pro začátečníky
  • Jak fungují zpětná volání v JavaScriptu
  • Jak psát regulární výrazy
  • Jak vytvořit seznam úkolů pomocí drag & drop

Doctype je časopis o frontendu. Čtěte, poslouchejte a učte se s námi.

Přečtěte si více

Objekt URL JavaScriptu: Úplné rozdělení

Objekt URL v JavaScriptu představuje adresu URL a poskytuje pohodlné metody pro práci s ní. Umožňuje vám analyzovat, vytvářet a dekódovat adresy URL.

Objekt URL lze vytvořit dvěma způsoby:

Konstruktor URL() je nejběžnější metodou, při které předáváte jakoukoli adresu URL jako řetězec jako argument.

const url = new URL("https://www.example.com/path?query=123#hash");

Použití window.location je globální objekt v prohlížečích, který obsahuje informace o aktuální URL.

const currentUrl = new URL(window.location.href);
  • 23 ledna 2024

Vygenerujte QR kódy pomocí JS ve 4 krocích. Node.js + qrcode

Dnes uděláme jednoduché REST API v Node.js a Express, které vygeneruje QR kódy pro jakýkoli odkaz. Pokud ještě nemáte nainstalované Node.js a npm, nainstalujte je z oficiálních stránek.

ChatGPT selže

Předstírejte, že jste neuronová síť a vyřešte 101 problémů s JavaScriptem co nejrychleji.

Představujeme JavaScript

Nyní, když víte, jak strukturovat webovou stránku pomocí HTML a upravovat ji pomocí CSS, je čas ji oživit pomocí JavaScriptu (JS). JavaScript je výkonný programovací jazyk, který se používá k vytváření interaktivních a dynamických webových stránek.

ČTĚTE VÍCE
Jak vyžehlit sako, které nelze vyžehlit?

JavaScript můžete do dokumentu HTML přidat dvěma způsoby:

Vložený JavaScript: přímo do dokumentu HTML, ve značkách:

Externí JavaScript: Připojení externího souboru .js k dokumentu HTML:

Událost Onclick v JS s příklady

Interaktivita je klíčovou součástí každého moderního webu. A jednou z nejčastěji používaných událostí k vytvoření interaktivity je událost onclick. V tomto článku se podrobně podíváme na to, co je událost onclick, jak ji používat, a uvedeme příklady jejího použití.

Událost onclick je událost JavaScriptu, která se spustí, když uživatel klikne na konkrétní prvek stránky. Může to být tlačítko, odkaz, obrázek nebo jakýkoli jiný klikací prvek.

Jak obrátit web. Nejkratší návod

Nedokážeme si představit, proč by to mohlo být potřeba, ale nemohli jsme to obejít.

Žádná magie. Zavoláme funkci JavaScriptu rotationBody(), která na prvek aplikuje vlastnost transform s hodnotou rotation(180deg). Když kliknete na tlačítko “Převrátit”, vše uvnitř se otočí o 180 stupňů (tedy vzhůru nohama)

function rotateBody() < document.body.style.transform = 'rotate(180deg)'; >

Tento kód však stránku otočí pouze jednou. Pokud chcete, aby se vrátil zpět po druhém kliknutí, zkomplikujte kód:

let isRotated = false; function rotateBody() < if (isRotated) < document.body.style.transform = 'rotate(0deg)'; document.body.style.direction = "ltr"; >else < document.body.style.transform = 'rotate(180deg)'; document.body.style.direction = "rtl"; >isRotated = !isRotated; >

Doufáme, že si před kliknutím na tlačítko přečtete tento popis.

Jak zjistit geolokaci: Geolocation API

Geolocation API umožňuje webům žádat a uživatelům poskytovat svou polohu webovým aplikacím. Geolokaci lze použít k výběru města v internetovém obchodě, zobrazení uživatele na mapě nebo navigaci k nejbližšímu hypermarketu.

Hlavní metodou Geolocation API je getCurrentPosition() , ale existují i ​​jiné metody a vlastnosti, které mohou být užitečné.

Co je localStorage a jak jej používat

localStorage je místo v prohlížeči uživatele, kam mohou stránky ukládat různá data. Je to jako schránka na věci, které nezmizí, ani když vypnete počítač nebo zavřete prohlížeč.

Před localStorage vývojáři často používali soubory cookie, ale nebyly příliš pohodlné: bylo málo místa a neustálý přenos dat tam a zpět. LocalStorage se zrodilo, aby tento proces usnadnil a zefektivnil.

Náhodné číslo z rozsahu

Řekněme, že z nějakého důvodu potřebujete celé náhodné číslo od min do max. Zde je úryvek, který vám pomůže:

funkce getRandomInRange(min, max)
  1. Math.random() generuje náhodné číslo mezi 0 a 1. Například jsme dostali číslo 0.54.
  2. (max – min + 1): Definuje počet možných hodnot v daném rozsahu. 10 – 0 + 1 = 11. To znamená, že máme 11 možných hodnot (0, 1, 2, . 10).
  3. Math.random() * (max – min + 1): Vynásobí náhodné číslo počtem možných hodnot: 0.54 * 11 = 5.94 .
  4. Math.floor(): Zaokrouhlí číslo dolů na nejbližší celé číslo. Takže, Math.floor(5.94) = 5 .
  5. . + min: Posune rozsah tak, aby minimální hodnota odpovídala min. Ale v našem příkladu, protože min = 0, to nezmění výsledek. příklad: 5 + 0 = 5.
  6. V našem příkladu jsme tedy dostali náhodné číslo 5 z rozsahu od 0 do 10.
ČTĚTE VÍCE
Jaká jsou gynekologická onemocnění u žen?

Chcete-li otestovat, spusťte:

console.log(getRandomInRange(1, 10)); // Тест
  • 7 2023 сентября

Jaký je rozdíl mezi var a let

Pokud s JavaScriptem začínáte, jistě vás napadlo, jaký je rozdíl mezi var a let a co si v jednotlivých případech vybrat. Pojďme si to vysvětlit.

var a let jsou jednoduše dva způsoby, jak deklarovat proměnnou. Takhle:

var x = 10; let y = 20;

Proměnná deklarovaná pomocí var je přístupná pouze v rámci své vlastní funkce nebo globálně, pokud byla deklarována mimo funkci.

function myFunction() < var z = 30; console.log(z); // 30 >myFunction(); console.log(z); // ReferenceError

To může způsobit neočekávané situace. Řekněme, že vytvoříte smyčku ve funkci a chcete, aby proměnná i zůstala v této funkci. Pokud použijete var , proměnná unikne mimo smyčku a bude dostupná v celé funkci.

Proměnné deklarované pomocí let jsou přístupné pouze v rámci bloku kódu, ve kterém byly deklarovány.

if (true) < let a = 40; console.log(a); // 40 >console.log(a); // ReferenceError

V JavaScriptu je blok kódu část kódu uzavřená ve složených závorkách <>. Může to být smyčka, kód v podmíněném příkazu nebo cokoli jiného.

if (true) < let blockScoped = "Я виден только здесь"; console.log(blockScoped); // "Я виден только здесь" >// здесь переменная blockScoped недоступна console.log(blockScoped); // ReferenceError

Pokud je j deklarováno ve smyčce let, zůstane pouze v této smyčce a pokus o přístup mimo smyčku způsobí chybu.

Podívejte se, jak funguje posuvník fotografií na skutečných příkladech. Vyhodnoťte jeho možnosti pro váš web bez ohledu na úkoly.

Příklad 1: Články

Posuvník je netriviální způsob, jak zobrazit vaše články na webu nebo oznámit nejnovější vydání časopisu nebo novin a upoutat pozornost jasnými titulky. Stylové pozadí snímků s efektem zoomu vytváří živý a živý vzhled. Všechny textové prvky mají různé velikosti písma, například citace je mnohem větší než podnadpis. To vytváří strukturu a umožňuje, aby snímky vypadaly komplexněji a dynamičtěji.

Příklad 2: Fitness

Ať už chcete předvést špičkový interiér vaší provozovny, předvést všechny detaily vašich produktů zblízka nebo přesvědčit uživatele o dokonalé kvalitě vašich služeb, není nic lepšího než fotografie. Stačí načíst požadované fotografie do posuvníku a zapnout možnost automatického posouvání, aby se snímky automaticky měnily. Ani jeden návštěvník stránek neodejde bez sledování až do konce!

ČTĚTE VÍCE
K čemu jsou korály?

Příklad 3: On-line jídlo

Posuvník je nejlepší způsob, jak zobrazit sérii bannerů na webu, ať už jde o reklamu nového produktu nebo speciální nabídky. Jednoduše načtěte bannery do posuvníku a vyberte možnost navigace pro své uživatele: přejeďte myší nebo některý z navigačních prvků, který kromě standardních obsahuje miniatury stránek. To vytváří zvědavost, která povzbudí návštěvníky, aby sledovali všechny snímky. Tento posuvník je skvělý způsob, jak přilákat nové prodeje.

Příklad 4: Móda

Co může přivést uživatele na nákupní stránku rychleji než tlačítko CTA? Upoutejte pozornost návštěvníků na vaše výprodeje a slevy pomocí posuvníku. Chcete-li to provést, musíte si vybrat stylový obrázek a přidat lákavý text, který vzbudí zájem. Aktivní tlačítko udělá zbytek za vás. Stačí přidat odkaz na požadovanou stránku a schéma pro přilákání nových prodejů je připraveno!

Příklad 5: Produkty

Předveďte své produkty potenciálním kupujícím co nejlákavějším způsobem. Prostřednictvím detailních fotografií můžete snadno ukázat všechny výhody vašich návrhů a text vám o nich pomůže říci. Widget obsahuje několik možností pro umístění textu a obrázků a můžete si vybrat tu nejvhodnější. Paralaxní efekt na obrázku dodá dynamiku a přitáhne pozornost.

Příklad 6: Nádobí

Vaše kuchařská mistrovská díla budou vypadat tak atraktivně, že jim neodolá žádná návštěva! Všechny fotografie můžete umístit na stejné tématické pozadí, takže výměna diapozitivů bude vypadat jako výměna nádobí. Je snadné zobrazit celou nabídku pohybem po snímcích pomocí šipek nebo tažením. Každý návštěvník stránek si najde jídlo podle svého vkusu!

Příklad 7: Rezervace

Vytvořte skutečně grandiózní posuvník, který vyplní celý blok obsahu. To je možné díky funkci automatického výběru šířky. Překryvný obrázek se překrývá s obsahem webu a zaměřuje pozornost na obsah posuvníku. Například to funguje skvěle, pokud chcete zobrazit text zákaznické recenze a použít fotografii jako překryvnou vrstvu. Navigační prvky lze umístit jak uvnitř, tak vně posuvníku.

Příklad 8: Sezónní prodej

Chcete uživatelům dát vědět o výprodeji na Černý pátek, Vánoce nebo jinou marketingovou příležitost? Naše připravené šablony vám to pomohou rychle a efektivně. Stačí přidat pár řádků textu a banner je připraven! A tlačítko CTA výrazně zkrátí cestu od zhlédnutí k nákupu. Posuvník se dokonale přizpůsobí jakémukoli rozlišení obrazovky. To si můžete sami zkontrolovat v nastavení, vybrat typ zařízení a rozhraní widgetu se přizpůsobí jeho parametrům.

ČTĚTE VÍCE
Eho se bojí Megan Fox?

Příklad 9: Video

Myslíte si, že posuvník není nejlepší místo pro video? Pak se podívejte na tento příklad, který dokonale kombinuje video, textový prvek a tlačítko. Uživatel může okamžitě přejít na stránku nákupu vstupenek, pokud ho upoutávka zaujme. Pomocí posuvníku můžete také vytvářet video instrukce krok za krokem nebo zobrazovat sérii tematických videí. Náhledy, které zároveň slouží jako prvky pro navigaci snímků, vám pomohou vidět, co bude dál.

Staňte se jedním z 2,078,753 XNUMX XNUMX zákazníků Elfsight Apps

Objevte více než 80 výkonnějších aplikací od Elfsight! Není vyžadována žádná bankovní karta. Žádná rizika!