Jak vytvořit Image Slider pomocí JavaScriptu pro posílení vašeho webu

autor:
Tweet
Share
Share
Pin

Stalo se vám někdy, že jste potřebovali zobrazit několik obrázků nebo videí na webové stránce, ale nechtěli jste zabírat příliš mnoho místa? Chcete zvýšit interaktivitu nebo atraktivitu vašich webových stránek?

V takových situacích vám může pomoci posuvník obrázků. V tomto článku si definujeme, co je posuvník obrázků, jaké jsou předpoklady pro jeho vytvoření a jak ho sestavit pomocí HTML, JavaScriptu a CSS.

Co je posuvník obrázků?

Posuvníky, někdy také nazývané karusely nebo prezentace, slouží k zobrazení textů, obrázků nebo videí. V tomto článku se zaměříme na posuvníky obrázků. Mnoho webových vývojářů používá posuvníky na domovských stránkách pro prezentaci nabídek nebo klíčových informací.

Níže uvádíme několik důvodů, proč byste měli zvážit použití posuvníků na svých webových stránkách:

  • Zlepšení uživatelské zkušenosti: Ideální webová stránka by měla být přehledná a kompaktní, aby uživatelé nemuseli zbytečně posouvat stránku dolů. Pokud máte mnoho obrázků, jejich umístění do posuvníku ušetří uživatelům námahu s nekonečným posouváním.
  • Vizuální přitažlivost: Většina návštěvníků webových stránek nevěnuje mnoho času stránkám, které jsou fádní a nudné. Použitím posuvníků a animací můžete výrazně zvýšit vizuální přitažlivost vašeho webu.
  • Úspora místa: Představte si, že chcete na stránce zobrazit 20 obrázků. Pokud byste je umístili vedle sebe, zabraly by mnoho místa. Posuvník vám umožní zobrazit všechny obrázky, aniž byste museli obětovat úspornost rozvržení.
  • Zobrazení dynamického obsahu: Posuvníky jsou skvělé pro zobrazování dynamického obsahu, jako jsou příspěvky ze sociálních sítí, blogy nebo novinky.

Předpoklady pro vytvoření posuvníku obrázků

  • Základní znalost HTML: Budeme vytvářet strukturu posuvníku, takže je důležité mít přehled o HTML tagů, tříd a div prvků.
  • Základní znalost CSS: CSS použijeme k nastavení vzhledu posuvníku a tlačítek.
  • Základní znalost JavaScriptu: JavaScript bude nutný k tomu, aby posuvník reagoval na akce uživatele a byl interaktivní.
  • Textový editor: Pro psaní kódu můžete použít jakýkoli textový editor. Já budu používat Visual Studio Code.
  • Sbírka obrázků: Připravte si sadu obrázků, které chcete v posuvníku použít.

Nastavení složky projektu

Nejprve si vytvoříme složku projektu, do které umístíme další složku s obrázky a také soubory HTML, CSS a JavaScript. Pro tento článek pojmenuji projekt „Image-Slider“. Projekt můžete vytvořit ručně nebo pomocí následujících příkazů v terminálu:

mkdir Image-Slider

cd Image-Slider

mkdir Images && touch index.html styles.css script.js

Poté přesuňte všechny obrázky do složky „Images“ a můžeme pokračovat k dalšímu kroku.

Toto je moje složka projektu, do které jsem přidal šest obrázků, které použiji pro posuvník. Veškerý HTML kód budeme psát do souboru index.html.

Typy posuvníků obrázků

Existují dva základní typy posuvníků obrázků: automatický a automatický s tlačítky pro ruční ovládání.

#1. Automatický posuvník obrázků

Automatický posuvník se sám přepne na další obrázek po určitém časovém intervalu, například po 3 sekundách.

HTML kód

Toto je můj HTML kód pro automatický posuvník:

<div id="slider">
    <div class="slide">
        <h1>Africké</h1>
        <img src="Images/img1.jpg" >
    </div>
    <div class="slide">
        <h1>Americké</h1>
        <img src="Images/img2.jpg" >
    </div>
    <div class="slide">
        <h1>Asijské</h1>
        <img src="Images/img3.jpg" >
    </div>
    <div class="slide">
        <h1>Arabské</h1>
        <img src="Images/img4.jpg" >
    </div>
    <div class="slide">
        <h1>Moderní</h1>
        <img src="Images/img5.jpg" >
    </div>
    <div class="slide">
        <h1>Evropské</h1>
        <img src="Images/img6.jpg" >
    </div>
</div>
<script src="script.js"></script>

V tomto kódu si můžeme všimnout následující:

  • Do sekce <head> jsme importovali CSS soubor, který použijeme pro stylování posuvníku.
  • Do těla stránky, těsně před uzavírací značku <body>, jsme přidali JavaScript soubor, který se postará o funkcionalitu posuvníku.
  • Každý snímek má přiřazenou třídu „slide“.
  • Pro import obrázků ze složky „Images“ používáme tag <img>.

Stylizace automatického posuvníku pomocí CSS

Nyní, když máme propojené HTML a CSS, můžeme začít stylovat naše obrázky. Přidejte tento kód do souboru CSS:

#slider {
    width: 80%;
  }
  
  .slide {
    width: 80%;
    display: none;
    position: relative;
  }
  
  .slide img {
    width: 80%;
    height: 80%;
  }
  
  .slide.active {
    display: block;
  }

V tomto CSS kódu:

  • Nastavujeme šířku a výšku posuvníku na 80%.
  • Nastavujeme, že aktivní snímek je zobrazen (display: block), zatímco ostatní snímky jsou skryté.

Přidání JavaScriptu pro interaktivitu posuvníku

Nyní do souboru script.js přidejte následující JavaScriptový kód:

var slides = document.querySelectorAll('.slide');
var currentSlide = 0;
var slideInterval = setInterval(nextSlide,2000);

function nextSlide() {
  slides[currentSlide].className="slide";
  currentSlide = (currentSlide+1)%slides.length;
  slides[currentSlide].className="slide active";
}

Tento JavaScriptový kód:

  • Používá document.querySelectorAll pro vyhledání všech prvků s třídou „slide“.
  • Nastavuje počáteční index currentSlide na 0.
  • Nastavuje slideInterval na 2000 (2 sekundy), což znamená, že obrázky v posuvníku se mění každé 2 sekundy.
  • Funkce nextSlide() odebere třídu „active“ z aktuálního snímku a přesune index o jeden dopředu. Poté přidá třídu „active“ novému snímku.

Tímto způsobem se automatický posuvník posouvá mezi obrázky.

#2. Automatický posuvník s tlačítky

Automatický posuvník, který jsme vytvořili, se automaticky posouvá každé 2 sekundy. Nyní si ukážeme, jak vytvořit posuvník, který se buď automaticky posouvá (například každé 3 sekundy), nebo uživatelé mohou ručně přepínat snímky pomocí tlačítek.

HTML kód

Změňte obsah souboru index.html na následující:

<div class="container">

    <div class="mySlides">
        <img src="Images/img1.jpg" style="width:100% ; height:50vh" >
    </div>
  
    <div class="mySlides">
        <img src="Images/img2.jpg" style="width:100% ; height:50vh">
    </div>
  
    <div class="mySlides">
        <img src="Images/img3.jpg" style="width:100% ; height:50vh">
    </div>
  
    <div class="mySlides">
        <img src="Images/img4.jpg" style="width:100% ; height:50vh">
    </div>
  
    <div class="mySlides">
        <img src="Images/img5.jpg" style="width:100% ; height:50vh">
    </div>
  
  
    <a class="prev" onclick="plusSlides(-1)">❮</a>
    <a class="next" onclick="plusSlides(1)">❯</a>
  
    <div class="caption-container">
      <p id="caption"></p>
    </div>
  
    <div class="row">
      <div class="column">
        <img class="demo cursor" src="Images/img1.jpg" style="width:100%" onclick="currentSlide(1)" >
      </div>
      <div class="column">
        <img class="demo cursor" src="Images/img2.jpg" style="width:100%" onclick="currentSlide(2)" >
      </div>
      <div class="column">
        <img class="demo cursor" src="Images/img3.jpg" style="width:100%" onclick="currentSlide(3)" >
      </div>
      <div class="column">
        <img class="demo cursor" src="Images/img4.jpg" style="width:100%" onclick="currentSlide(4)" >
      </div>
      <div class="column">
        <img class="demo cursor" src="Images/img5.jpg" style="width:100%" onclick="currentSlide(5)" >
      </div>
      
    </div>
  </div>

<script src="script.js"></script>

Tento HTML kód funguje takto:

  • Máme div s třídou „mySlides“, ve kterém se nachází pět obrázků.
  • Máme dvě tlačítka, „předchozí“ a „další“, s funkcí onClick, která uživatelům umožní procházet snímky.
  • Ve spodní části stránky máme miniatury obrázků.

CSS kód

Do vašeho CSS kódu přidejte následující:

* {
  box-sizing: border-box;
}

.container {
  position: relative;
}

.mySlides {
  justify-content: center;
}

.cursor {
  cursor: pointer;
}

.prev,
.next {
  cursor: pointer;
  position: absolute;
  top: 40%;
  width: auto;
  padding: 16px;
  margin-top: -50px;
  color: rgb(34, 143, 85);
  font-weight: bold;
  font-size: 20px;
  border-radius: 0 3px 3px 0;
  user-select: none;
  -webkit-user-select: none;
}

.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

.prev:hover,
.next:hover {
  background-color: rgba(0, 0, 0, 0.8);
}

.caption-container {
  text-align: center;
  background-color: orangered;
  padding: 2px 16px;
  color: white;
}

.row:after {
  content: "";
  display: table;
  clear: both;
}

.column {
  float: left;
  width: 16.66%;
}

.demo {
  opacity: 0.6;
}

.active,
.demo:hover {
  opacity: 1;
}

Tento CSS kód:

  • Nastavuje vlastnost display třídy „mySlides“ na none, což znamená, že všechny snímky jsou skryté.
  • Nastavuje průhlednost miniatur na 1 (opacity: 1), pokud na ně najedeme myší (.demo:hover).

JavaScript kód

A nakonec, následující JavaScriptový kód přidejte do souboru script.js:

let slideIndex = 1;
showSlides(slideIndex);

function plusSlides(n) {
  showSlides(slideIndex += n);
}

function currentSlide(n) {
  showSlides(slideIndex = n);
}

let slideInterval = setInterval(() => {
  plusSlides(1);
}, 3000);

let slideshowContainer = document.getElementsByClassName('slideshow-container')[0];
slideshowContainer.addEventListener('mouseenter', () => {
  clearInterval(slideInterval);
});

slideshowContainer.addEventListener('mouseleave', () => {
  slideInterval = setInterval(() => {
    plusSlides(1);
  }, 3000);
});

function showSlides(n) {
  let i;
  let slides = document.getElementsByClassName("mySlides");
  let dots = document.getElementsByClassName("demo");
  let captionText = document.getElementById("caption");
  if (n > slides.length) {slideIndex = 1}
  if (n < 1) {slideIndex = slides.length}
  for (i = 0; i < slides.length; i++) {
    slides[i].style.display = "none";
  }
  for (i = 0; i < dots.length; i++) {
    dots[i].className = dots[i].className.replace(" active", "");
  }
  slides[slideIndex-1].style.display = "block";
  dots[slideIndex-1].className += " active";
  captionText.innerHTML = dots[slideIndex-1].alt;
}

Náš JavaScriptový kód dělá následující:

  • Funkce currentSlide nastavuje zobrazení aktuálního snímku.
  • Funkce plusSlides přičítá nebo odečítá z slideIndex, čímž určuje, který snímek se má zobrazit.
  • Pokud uživatel neklikne na tlačítka, snímky se automaticky posouvají každých 3000 milisekund.
  • Při najetí myší na posuvník se automatické posouvání zastaví a při odjetí myší se opět spustí.

Pokud uživatel použije navigační tlačítka, posuvník se bude chovat následovně:

Pokud uživatel nepoužije navigační tlačítka, posuvník se bude automaticky posouvat každé 3 sekundy:

Testování a ladění posuvníku obrázků

Chyby v kódu jsou běžnou součástí práce vývojáře. Pokud váš kód nefunguje správně ani po provedení výše uvedených kroků, můžete chyby najít a opravit pomocí následujících tipů:

  • Ladění každého souboru zvlášť: Náš kód se skládá ze tří souborů: HTML, CSS a JavaScript. Každý z těchto jazyků má vlastní pravidla. Můžete ověřit, zda je váš HTML, CSS a JavaScript kód validní pomocí nástrojů jako W3C Markup Validation Service pro HTML, CSS Validator pro CSS kód a Chrome DevTools pro testování JavaScriptu.
  • Proveďte různé typy testů: Vizuálně otestujte, zda se snímky zobrazují správně. Dále otestujte výkon posuvníku a ujistěte se, že je interaktivní. Také funkčně ověřte, zda je posuvník navigovatelný.
  • Otestujte kód s různými formáty a velikostmi obrázků: Dobrý posuvník by měl bez problémů fungovat s obrázky různých formátů a velikostí.
  • Automatizujte testy: Automatizace je užitečná i při testování. Můžete používat nástroje jako Selenium nebo LoadRunner pro psaní a spouštění testovacích skriptů. Tyto nástroje vám umožní opakovaně používat některé vaše testy.
  • Dokumentujte testy: Testování je kontinuální proces. Možná budete muset testy průběžně upravovat, dokud nebude kód fungovat, jak má. Zdokumentujte si tento proces, aby byl váš kód čitelný a snadno dohledatelný.

Posuvníky obrázků: Osvědčené postupy

  • Udržujte jednoduchost: Posuvníky jsou sice atraktivní, ale neměli byste jich používat příliš mnoho. Ideální je něco mezi 4 až 7 obrázky na posuvník.
  • Testujte posuvníky: Než posuvník zveřejníte, důkladně otestujte jeho funkčnost.
  • Vytvářejte responzivní posuvníky: Zajistěte, aby se posuvník dobře zobrazoval na různých velikostech obrazovek.
  • Používejte kvalitní obrázky: Používejte pouze obrázky ve vysoké kvalitě. Formát SVG je ideální, protože při změně velikosti neztrácí kvalitu.
  • Upravte velikost obrázků: Můžete mít obrázky různých formátů a velikostí. Vždy se ujistěte, že obrázky v posuvníku mají stejnou velikost. Toho lze dosáhnout pomocí CSS.

Závěrem

Doufám, že nyní můžete vytvořit plně funkční posuvník pro zobrazování důležitých dat na webu bez použití rozhraní pro uživatelské rozhraní. Stejný postup můžete použít i pro vytváření posuvníků s videem.