Existuje mnoho návodů, jak vytvořit posuvník v javascriptu a v mnoha rámcích, ale někdy nemusíme trávit tolik času přidáváním jednoduché funkce posuvníku na naši webovou stránku.
Tento tutoriál vám proto poskytne rychlý a jednoduchý způsob, jak vytvořit posuvník. Jo...a budeme k tomu používat plugin.
Při vytváření tohoto posuvníku použijeme plugin siema javascript a je super snadný a lehký
Začněme....
Otevřete editor kódu, vytvoříte html soubor home.html
Dále by měl typický html kód domovské stránky vypadat takto. Do tagu head napíšeme naše css a nějaký javascript
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SLider Demo</title>
</head>
<style>
/*all css styles goes here*/
</style>
<body>
<div class="siema">
<div>
<img src="mypath/folder/image1.png" alt="slider
1">
<img src="mypath/folder/image2.png" alt="slider
3">
<img src="mypath/folder/image3.png" alt="slider
3">
</div>
</div>
</body>
</html>
Dovolte mi vysvětlit:máme nadřazený div s třídou siema, který jsme použili jako obal/kontejner pro obrázky, které budeme používat pro náš posuvník. Velmi důležité!!!
Dále musíme importovat zmenšenou verzi pluginu siema javascript.
Minifikovaná verze je hostována na githubu, takže přejdeme na zdrojový kód Odkaz klikněte na červeně zakroužkovanou oblast na obrázku níže, vyberte soft wrap dále zvýrazněte celý kód a zkopírujte jej...
Dále vytvořte soubor javascript s názvem siema.minified.js
Vložte celý kód, který jste zkopírovali, do tohoto nového souboru js siema.minified.js
Dále propojte cestu k souboru siema.minified.js v editoru kódu pomocí atributu source pro vaši značku skriptu, jako je to
<script src="siema.minified.js"> </script>
Poznámka: ujistěte se, že jste přidali cestu k souboru v závislosti na umístění, kde máte siema.minifed.js
Pojďme napsat hlavní kód:
<script src="siema.min.js"></script>
<script>
new Siema();
</script>
Takto bude vypadat náš úplný kód
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SLider Demo</title>
</head>
<body>
<div class="siema">
<div>
<img src="mypath/folder/image1.png" alt="slider
1">
<img src="mypath/folder/image2.png" alt="slider
3">
<img src="mypath/folder/image3.png" alt="slider
3">
</div>
</div>
</body>
<script src="siema.min.js"></script>
<script>
new Siema();
</script>
</html>
V tomto okamžiku bude náš kód fungovat, ale chceme být schopni přecházet z jednoho snímku na druhý. Abychom to mohli udělat, budeme muset do našeho souboru home.html přidat dvě navigační tlačítka, NEXT a PREV
<button class="prev"> Previous </button>
<button class="next"> Next </button>
dále k tlačítkům přidáme posluchače událostí, takže po kliknutí na tlačítko se posuvníky posunou buď doleva (předchozí) nebo (doprava), resp.
document.querySelector('.prev').addEventListener('click', ()=> mySiema.prev())
document.querySelector('.next').addEventListener('click', ()=> mySiema.next())
Dovolte mi to upřesnit:jednoduše vybíráme prvek s třídou prev a next potom k nim přidejte posluchač události, takže když je některé z tlačítek click ed, vrátíme funkce a siema mySiema.next() a mySiema.prev() respektive.
Typický výsledek:
Řekněme, že chceme mít více než jeden obrázek na zobrazení snímku, můžeme určit počet obrázků, které chceme mít takto:
const mySiema = new Siema({
//we want3 images to be displayed instead of the default which is one
perPage : 3
});
Odezva !!!
Nakonec určitě nastane situace, kdy chcete, aby se na obrazovkách mobilních zařízení zobrazovaly pouze 2 obrázky, nastavíte si port zobrazení pro různé velikosti obrazovky :445px, 600px, 1024px atd
Zde je příklad:
const mySiema = new Siema({
perPage : {
400: 2, //2 images for 400px screen sizes
1024:5 // 5 images for 1024px screen sizes
}
});
Zde je úplný kód
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SLider Demo</title>
</head>
<body>
<div class="siema">
<div>
<img src="mypath/folder/image1.png" alt="slider
1">
<img src="mypath/folder/image2.png" alt="slider
3">
<img src="mypath/folder/image3.png" alt="slider
3">
</div>
</div>
</body>
<script src="siema.min.js"></script>
<script>
const mySiema = new Siema({
perPage : {
400: 2,
1024:5
}
});
</script>
</html>
Můžete nahlédnout do dokumentace pluginu nebo jiných funkcí
jako trvání, animace (uvolnění) atd
Yoo...doufám, že vám to pomohlo udělat posuvník za 10 minut, i když... (usmívá se) Snažil jsem se, aby byl tento návod co nejkratší a přímo k věci.
Taky jsem na twitteru.