Cum să creați Slider de imagine cu JavaScript pentru a vă îmbunătăți site-ul

de
Tweet
Share
Share
Pin

V-ați trezit vreodată într-o situație în care doriți să afișați mai multe imagini/videoclipuri pe o secțiune a unei pagini web, dar nu doriți să ocupați mult spațiu? Doriți să adăugați interactivitate paginilor dvs. web sau să le faceți mai atractive?

Un glisor de imagine vă poate scuti de luptă. În acest articol, vom defini un glisor de imagine, cerințele preliminare pentru crearea unui glisor de imagine și cum să creați unul folosind HTML, JavaScript și CSS.

Ce este un glisor de imagine?

Glisoarele sunt carusele sau prezentări de diapozitive care afișează texte, imagini sau videoclipuri. Acest articol se va concentra pe glisoarele de imagine. Majoritatea dezvoltatorilor web folosesc glisoare de pe pagina principală pentru a prezenta ofertele sau cele mai importante informații.

Acestea sunt câteva motive pentru care ar trebui să utilizați glisoare pe paginile dvs. web.

  • Îmbunătățiți experiența utilizatorului: o pagină web ideală ar trebui să fie compactă, astfel încât utilizatorii finali să nu fie nevoiți să deruleze și să deruleze pentru a obține date importante. Dacă aveți mai multe imagini, puteți salva utilizatorilor bătălia de a derula, afișându-le într-un glisor.
  • Atractie vizuală: majoritatea utilizatorilor site-ului web nu vor petrece mult timp pe o pagină web simplă. Puteți îmbunătăți atractivitatea vizuală cu glisoare și animații.
  • Economisiți spațiu: dacă aveți aproximativ 20 de imagini pe care doriți să le afișați pe pagina dvs. web, acestea pot ocupa mult spațiu. Crearea unui glisor vă va permite să economisiți spațiu și totuși permite utilizatorilor să le acceseze pe toate.
  • Afișați conținut dinamic: puteți utiliza glisoare pentru a afișa conținut dinamic, cum ar fi încorporarea rețelelor sociale, bloguri și știri.

Cerințe preliminare pentru crearea unui glisor de imagine

  • O înțelegere de bază a HTML: vom descrie aici structura glisorului. Ar trebui să vă simțiți confortabil să lucrați cu diverse etichete HTML, clase și div-uri.
  • O înțelegere de bază a CSS: vom folosi CSS pentru a stila glisoarele și butoanele de imagine.
  • O înțelegere de bază a JavaScript: vom folosi JavaScript pentru a face glisoarele de imagine receptive.
  • Un editor de cod: puteți utiliza editorul de cod la alegere. Voi folosi Visual Studio Code.
  • O colecție de imagini.

Configurați folderul de proiect

Avem nevoie de un folder de proiect, un folder de imagini în interiorul acestuia și fișiere HTML, CSS și JavaScript. Voi numi proiectul meu „Image-Slider”. Puteți să vă creați proiectul manual sau să utilizați aceste comenzi pentru a începe;

  Cum să curățați și să dezinfectați toate gadgeturile dvs

mkdir Image-Slider

cd Image-Slider

mkdir Imagini && atingeți index.html styles.css script.js

Adăugați toate imaginile în folderul „Imagini” pe care l-am creat în dosarul proiectului și treceți la pasul următor.

Acesta este folderul meu de proiect, unde am adăugat șase imagini pe care le voi folosi pentru a crea un glisor. Tot codul nostru HTML va fi în fișierul index.html.

Tipuri de glisoare de imagine

Putem avea două tipuri de Image Sliders; un glisor automat și un glisor automat de imagine cu butoane.

#1. Glisor automat pentru imagine

Un glisor automat derulează automat la următoarea imagine după un anumit timp, să zicem, de exemplu, 3 secunde.

cod HTML

Acesta este codul meu HTML;

<!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>

Din acest cod, putem observa următoarele;

  • Mi-am importat fișierul CSS în index.html în secțiunea . Acesta va fi folosit în etapele ulterioare.
  • Am adăugat JavaScript la codul meu HTML chiar înainte de eticheta de închidere . Voi folosi JavaScript pentru a adăuga funcționalități la glisoare.
  • Fiecare slide are o clasă de slide.
  • Am folosit eticheta pentru a importa imagini din folderul Imagini.

Stilați glisorul automat de imagine folosind CSS

Acum ne putem stila imaginile, deoarece am legat deja fișierele CSS și HTML.

Adăugați acest cod în fișierul dvs. CSS;

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

Din acest cod, putem observa următoarele;

  • Avem lățimea și înălțimea cursorului nostru la 80%
  • Am setat diapozitivul activ să se blocheze, ceea ce înseamnă că doar diapozitivul activ va fi afișat în timp ce restul sunt ascunse.

Cum să adăugați JavaScript pentru a face glisorul de imagine receptiv

Adăugați acest cod în fișierul dvs. 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";
}

Acest JavaScript face următoarele;

  • Folosim document.querySelectorAll selector pentru a viza toate elementele cu o clasă de slide.
  • Oferim valoarea initiala currentSlide 0.
  • Am stabilit slideInterval la 2000 (2 secunde), adică imaginile din glisor se schimbă după fiecare 2 secunde.
  • Acest cod alunecă[currentSlide].className = ‘diapozitiv’; elimină clasa activă din slide-ul curent
  • Acest cod currentSlide = (currentSlide + 1) % slides.length; incrementează indexul curent al slide-ului.
  • Acest cod alunecă[currentSlide].className = ‘diapozitiv activ’; adaugă o clasă activă la diapozitivul curent.

Glisorul automat funcționează după cum urmează;

#2. Glisor automat cu butoane

Glisorul de imagine pe care l-am creat derulează automat după fiecare 2 secunde. Acum putem crea o imagine în care utilizatorii pot trece la următorul diapozitiv făcând clic pe un buton sau derulând automat după fiecare 3 secunde dacă utilizatorul nu face clic pe butoane.

cod HTML

Puteți modifica conținutul fișierului index.html după cum urmează;

<!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>

Acest cod HTML funcționează după cum urmează;

  • Avem o clasă numită mySlides care conține cele cinci imagini ale noastre.
  • Avem două butoane, „prev” și „next” cu un onClick, permițând utilizatorilor să defileze prin diapozitive.
  • Avem o miniatură care arată imaginile în partea de jos a paginii web.

Cod CSS

Adăugați acest lucru la codul dvs.;

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

Codul CSS funcționează după cum urmează;

  • Am setat proprietatea de afișare a clasei .mySlides ca nici unul, ceea ce înseamnă că toate diapozitivele sunt ascunse implicit.
  • Am setat opacitatea miniaturilor pe care se trec cu mouse-ul ca 1 prin regula activă, .demo:hover {opacity: 1;}.

Cod JavaScript

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

Puteți obține codul sursă final aici.

Codul nostru JavaScript face următoarele;

  • Avem o funcție currentSlide cu o valoare de afișare setată ca niciuna. Această regulă permite paginii noastre web să afișeze doar diapozitivul curent.
  • Avem o funcție plusSlides care adaugă/scăde valoarea dată din slideIndex pentru a determina ce diapozitiv să fie afișat.
  • Dacă utilizatorul nu face clic pe butoane, diapozitivele se vor derula automat după fiecare 3000 de milisecunde.

Dacă un utilizator folosește fila de navigare, glisorul nostru de imagine va funcționa după cum urmează;

Dacă utilizatorul nu folosește butoanele de navigare, glisorul de imagine se va derula automat după fiecare 3 secunde, după cum urmează;

Testare și depanare Slider de imagine

Erorile și erorile fac parte din călătoria unui dezvoltator și să le ai în codul tău nu înseamnă că ești un dezvoltator rău. Dacă codul dvs. nu funcționează chiar și după ce ați urmat pașii menționați mai sus, puteți încerca aceste opțiuni de testare și depanare pentru a remedia erorile:

  • Depanați fiecare fișier separat: codul nostru are trei fișiere, fișiere HTML, CSS și JavaScript. Cele trei limbi au reguli diferite. Puteți verifica dacă codurile HTML, CSS și JavaScript sunt valide folosind instrumente precum Serviciul de validare a marcajului W3C pentru HTML, Validatorul CSS pentru codul dvs. CSS și Chrome DevTools pentru a testa codul JavaScript.
  • Efectuați diferite tipuri de teste: puteți face teste vizuale pentru a vă asigura că imaginile sunt afișate corect, teste de performanță pentru a verifica dacă imaginile sunt receptive și teste funcționale pentru a vă asigura că imaginile sunt navigabile.
  • Testați-vă codul cu diferite formate și dimensiuni de imagine: un glisor de imagine bun ar trebui să funcționeze cu diferite formate și dimensiuni de imagine.
  • Automatizați-vă testele: automatizarea este peste tot și, de asemenea, puteți beneficia de pe urma testării. Puteți folosi instrumente precum Selenium sau LoadRunner pentru a scrie și executa scripturi de automatizare de testare. Aceste instrumente vă permit, de asemenea, să reutilizați unele dintre testele dvs.
  • Documentați-vă testele: testarea este un proces continuu. Poate fi necesar să vă îmbunătățiți testele până când codul funcționează conform așteptărilor. Documentați acest proces pentru a vă face codul ușor de citit și de consultat.

Glisoare de imagine: cele mai bune practici

  • Păstrați-o simplu: glisoarele sunt atractive. Cu toate acestea, păstrați numărul de imagini dintr-un glisor scăzut. Ceva de genul 4-7 imagini per diapozitiv este ideal.
  • Testați-vă glisoarele: testați-le pentru funcționalitate înainte de a le publica online.
  • Creați glisoare receptive: asigurați-vă că glisoarele create răspund la diferite dimensiuni de ecran.
  • Utilizați imagini de înaltă calitate: luați/descărcați imagini de înaltă calitate pentru glisoare. Salvarea imaginilor în format SVG este o abordare minunată, deoarece acestea nu își pierd calitatea atunci când le redimensionați.
  • Redimensionați imaginile: este posibil să aveți diferite dimensiuni și formate de imagini. Asigurați-vă întotdeauna că imaginile dintr-un glisor au aceeași dimensiune. Puteți obține acest lucru prin CSS.

Încheierea

Sperăm că acum puteți crea un glisor de imagine complet funcțional pentru a afișa date importante pe site-ul dvs. web fără a utiliza cadre de interfață. Puteți utiliza aceeași abordare pentru a crea glisoare video pe paginile web.