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

autor:
Tweet
Share
Share
Pin

Ocitli jste se někdy v situaci, kdy chcete v části webové stránky zobrazit několik obrázků/videí, ale nechcete zabírat mnoho místa? Chcete svým webovým stránkám přidat interaktivitu nebo je zatraktivnit?

Posuvník obrázků vám může ušetřit boj. V tomto článku budeme definovat jezdec obrázku, předpoklady pro vytvoření jezdce obrázku a jak jej vytvořit pomocí HTML, JavaScriptu a CSS.

Co je to posuvník obrázků?

Posuvníky jsou karusely nebo prezentace, které zobrazují texty, obrázky nebo videa. Tento článek se zaměří na posuvníky obrázků. Většina webových vývojářů používá posuvníky na domovské stránce k prezentaci nabídek nebo nejdůležitějších informací.

Toto je několik důvodů, proč byste měli na svých webových stránkách používat posuvníky.

  • Zlepšení uživatelské zkušenosti: Ideální webová stránka by měla být kompaktní, aby koncoví uživatelé nemuseli posouvat a posouvat, aby získali důležitá data. Pokud máte více obrázků, můžete uživatelům ušetřit námahu s posouváním tím, že je zobrazíte v posuvníku.
  • Vizuální přitažlivost: Většina uživatelů webových stránek nestráví mnoho času na obyčejné webové stránce. Vizuální přitažlivost můžete zlepšit pomocí posuvníků a animací.
  • Ušetřete místo: Pokud máte například 20 obrázků, které chcete zobrazit na své webové stránce, mohou zabírat hodně místa. Vytvoření posuvníku vám umožní ušetřit místo a přesto uživatelům umožní přístup ke všem.
  • Zobrazit dynamický obsah: Pomocí posuvníků můžete zobrazit dynamický obsah, jako jsou vložené prvky sociálních médií, blogy a zprávy.

Předpoklady pro vytvoření jezdce obrázku

  • Základní pochopení HTML: Zde popíšeme strukturu posuvníku. Měli byste být schopni pracovat s různými HTML tagy, třídami a divs.
  • Základní pochopení CSS: Ke stylování posuvníků a tlačítek obrázků použijeme CSS.
  • Základní pochopení JavaScriptu: K tomu, aby byly posuvníky obrázků citlivé, použijeme JavaScript.
  • Editor kódu: Můžete použít libovolný editor kódu. Budu používat Visual Studio Code.
  • Sbírka obrázků.

Nastavte složku projektu

Potřebujeme složku projektu, složku s obrázky v ní a soubory HTML, CSS a JavaScript. Svůj projekt pojmenuji „Image-Slider“. Svůj projekt můžete vytvořit ručně nebo pomocí těchto příkazů začít;

mkdir Image-Slider

cd Image-Slider

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

Přidejte všechny své obrázky do složky „Images“, kterou jsme vytvořili ve složce projektu, a přejděte k dalšímu kroku.

Toto je moje složka projektu, kam jsem přidal šest obrázků, které použiji k vytvoření posuvníku. Veškerý náš HTML kód bude v souboru index.html.

Typy jezdců obrázků

Můžeme mít dva typy Image Slider; automatický posuvník a automatický posuvník obrázků s tlačítky.

#1. Automatický jezdec obrázku

Automatický posuvník se po určité době, například 3 sekundách, automaticky posune na další obrázek.

HTML kód

Toto je můj HTML 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>Document</title>
    <link rel="stylesheet" href="https://wilku.top/how-to-create-image-slider-with-javascript-to-amp-up-your-website/styles.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" />


</head>

<body>
  <div id="slider">
    <div class="slide">
        <h1>African</h1>
      <img src="Images/img1.jpg" >
    </div>
    <div class="slide">
        <h1>American</h1>
      <img src="Images/img2.jpg" >
    </div>
    <div class="slide">
        <h1>Asian</h1>
      <img src="Images/img3.jpg" >
    </div>
    <div class="slide">
        <h1>Arabic</h1>
      <img src="Images/img4.jpg" >
    </div>
    <div class="slide">
        <h1>Modern </h1>
      <img src="Images/img5.jpg" >
    </div>
    <div class="slide">
        <h1> European </h1>
      <img src="Images/img6.jpg" >
    </div>
  </div>

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


</body>
</html>

Z tohoto kódu si můžeme všimnout následujícího;

  • Importoval jsem svůj soubor CSS do index.html v sekci . To bude použito v pozdějších krocích.
  • Přidal jsem JavaScript do svého HTML kódu těsně před uzavírací značku . K přidání funkčnosti posuvníků použiji JavaScript.
  • Každý snímek má třídu snímku.
  • K importu obrázků ze složky Obrázky jsem použil značku .

Upravte styl automatického jezdce obrázku pomocí CSS

Nyní můžeme stylovat naše obrázky, protože jsme již propojili soubory CSS a HTML.

Přidejte tento kód do svého souboru CSS;

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

Z tohoto kódu si můžeme všimnout následujícího;

  • Máme šířku a výšku našeho posuvníku na 80 %
  • Aktivní snímek jsme nastavili na blokování, což znamená, že bude zobrazen pouze aktivní snímek, zatímco zbytek bude skrytý.

Jak přidat JavaScript, aby jezdec obrázku reagoval

Přidejte tento kód do svého souboru script.js;

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 JavaScript dělá následující;

  • K cílení na všechny prvky s třídou snímku používáme selektor document.querySelectorAll.
  • Dáme počáteční hodnotu currentSlide 0.
  • Nastavili jsme slideInterval na 2000 (2 sekundy), což znamená, že obrázky v posuvníku se mění po každých 2 sekundách.
  • Tento kód se posune[currentSlide].className = ‚snímek‘; odebere aktivní třídu z aktuálního snímku
  • Tento kód currentSlide = (currentSlide + 1) % slides.length; zvýší aktuální index snímku.
  • Tento kód se posune[currentSlide].className = ‚aktivní snímek‘; přidá aktivní třídu do aktuálního snímku.

Automatický posuvník funguje následovně;

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

Posuvník obrázku, který jsme vytvořili, se automaticky posouvá každé 2 sekundy. Nyní můžeme vytvořit obrázek, kde se uživatelé mohou přesunout na další snímek kliknutím na tlačítko nebo automaticky posouvat po každých 3 sekundách, pokud uživatel neklikne na tlačítka.

HTML kód

Obsah souboru index.html můžete změnit následovně;

<!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>Image Slider</title>
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"
    />
    <link rel="stylesheet" href="https://wilku.top/how-to-create-image-slider-with-javascript-to-amp-up-your-website/styles.css" />
  </head>
  <body>
    <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>
  </body>
</html>

Tento kód HTML funguje následovně;

  • Máme třídu s názvem mySlides, která nese našich pět obrázků.
  • Máme dvě tlačítka, „předchozí“ a „další“ s funkcí onClick, která uživatelům umožňují procházet snímky.
  • Ve spodní části webové stránky máme miniaturu, která zobrazuje obrázky.

CSS kód

Přidejte toto do svého kódu;

* {
  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;
}

CSS kód funguje následovně;

  • Vlastnost zobrazení třídy .mySlides jsme nastavili jako none, což znamená, že všechny snímky jsou ve výchozím nastavení skryté.
  • Nastavili jsme neprůhlednost miniatur, na které je umístěn ukazatel myši, jako 1 prostřednictvím aktivního pravidla .demo:hover {neprůhlednost: 1;}.

JavaScript kód

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;
}

Konečný zdrojový kód můžete získat zde.

Náš kód JavaScript dělá následující;

  • Máme funkci currentSlide s hodnotou zobrazení nastavenou jako none. Toto pravidlo umožňuje naší webové stránce zobrazit pouze aktuální snímek.
  • Máme funkci plusSlides, která přičte/odečte danou hodnotu od slideIndex a určí, který snímek se má zobrazit.
  • Pokud uživatel neklikne na tlačítka, snímky se automaticky posouvají po každých 3000 milisekundách.

Pokud uživatel použije navigační kartu, náš posuvník obrázků bude fungovat následovně;

Pokud uživatel nepoužije navigační tlačítka, posuvník obrázku se bude automaticky posouvat každé 3 sekundy následovně;

Testovací a ladicí jezdec obrázku

Chyby a chyby jsou součástí cesty vývojáře a mít je ve svém kódu neznamená, že jste špatný vývojář. Pokud váš kód nefunguje ani po provedení výše uvedených kroků, můžete chyby opravit pomocí těchto možností testování a ladění:

  • Ladění každého souboru zvlášť: Náš kód má tři soubory, HTML, CSS a JavaScript. Tyto tři jazyky mají různá pravidla. Můžete zkontrolovat, zda jsou vaše kódy HTML, CSS a JavaScript platné, pomocí nástrojů, jako je W3C Markup Validation Service pro HTML, CSS Validator pro váš kód CSS a Chrome DevTools pro testování kódu JavaScript.
  • Proveďte různé typy testů: Můžete provést vizuální testy, abyste se ujistili, že se snímky zobrazují správně, Testy výkonu, abyste zkontrolovali, zda snímky reagují, a Funkční testy, abyste zajistili, že snímky budou navigovatelné.
  • Otestujte svůj kód s různými formáty a velikostmi obrázků: Dobrý posuvník obrázků by měl fungovat s různými formáty a velikostmi obrázků.
  • Automatizujte své testy: Automatizace je všude a i vy z ní můžete při testování těžit. K psaní a spouštění testovacích automatizačních skriptů můžete použít nástroje jako Selenium nebo LoadRunner. Tyto nástroje vám také umožňují znovu použít některé vaše testy.
  • Zdokumentujte své testy: Testování je nepřetržitý proces. Možná budete muset své testy neustále vylepšovat, dokud váš kód nebude fungovat podle očekávání. Zdokumentujte tento proces, aby byl váš kód čitelný a snadno se na něj odkazovalo.

Posuvníky obrázků: Nejlepší postupy

  • Jednoduše: Posuvníky jsou atraktivní. Počet snímků v posuvníku však udržujte na nízké úrovni. Ideální je něco jako 4-7 obrázků na snímek.
  • Otestujte své posuvníky: Před publikováním online otestujte jejich funkčnost.
  • Vytvořte responzivní posuvníky: Ujistěte se, že vytvořené posuvníky reagují na různé velikosti obrazovky.
  • Používejte obrázky ve vysoké kvalitě: Pořizujte/stahujte obrázky ve vysoké kvalitě pro své posuvníky. Ukládání obrázků ve formátu SVG je skvělý přístup, protože při změně velikosti neztrácejí svou kvalitu.
  • Změna velikosti obrázků: Můžete mít různé velikosti a formáty obrázků. Vždy se ujistěte, že obrázky v posuvníku mají stejnou velikost. Toho lze dosáhnout pomocí CSS.

Zabalit se

Doufáme, že nyní můžete vytvořit plně funkční jezdec obrázků pro zobrazení důležitých dat na vašem webu bez použití rozhraní uživatelského rozhraní. Stejný přístup můžete použít k vytvoření posuvníků videa na webových stránkách.