Како да направите клизач слике са ЈаваСцрипт-ом да бисте побољшали своју веб локацију

by
Tweet
Share
Share
Pin

Da li ste se ikada našli u situaciji da želite da prikažete nekoliko fotografija ili video zapisa na određenom delu veb stranice, a da pritom ne zauzimate previše prostora? Želite li dodati interaktivnost i učiniti vaše veb stranice vizuelno privlačnijim?

Klizač slika može vam pomoći da rešite taj problem. U ovom članku ćemo definisati šta je klizač slika, koji su preduslovi za njegovo kreiranje, i kako ga napraviti koristeći HTML, JavaScript i CSS.

Šta je klizač slika?

Klizači, poznati i kao karuseli ili prezentacije slajdova, omogućavaju prikaz teksta, fotografija ili video snimaka. Ovaj članak će se fokusirati na klizače slika. Većina veb developera koristi klizače na početnim stranicama za promociju ponuda ili prikazivanje najvažnijih informacija.

U nastavku su navedeni neki od razloga zašto biste trebali koristiti klizače na vašim veb stranicama:

  • Poboljšanje korisničkog iskustva: Idealna veb stranica treba biti kompaktna, tako da korisnici ne moraju beskrajno skrolovati kako bi došli do bitnih informacija. Ako imate veći broj slika, možete korisnicima olakšati pregled, prikazujući ih u klizaču.
  • Vizuelna privlačnost: Većina posetilaca veb stranica neće provesti puno vremena na jednostavnim, neupadljivim stranicama. Pomoću klizača i animacija možete poboljšati vizuelnu atraktivnost vašeg veb sajta.
  • Ušteda prostora: Ako želite prikazati, na primer, 20 fotografija na vašoj stranici, to može zauzeti prilično prostora. Korišćenjem klizača možete uštedeti prostor, a pritom omogućiti korisnicima pristup svim slikama.
  • Prikaz dinamičkog sadržaja: Klizači se mogu koristiti za prikazivanje dinamičkog sadržaja kao što su ugrađeni sadržaji sa društvenih mreža, blogovi i vesti.

Preduslovi za kreiranje klizača slika

  • Osnovno razumevanje HTML-a: Ovde ćemo opisati strukturu klizača. Potrebno je da budete upoznati sa osnovnim HTML tagovima, klasama i divovima.
  • Osnovno razumevanje CSS-a: CSS ćemo koristiti za stilizovanje klizača i dugmića za navigaciju.
  • Osnovno razumevanje JavaScript-a: JavaScript ćemo koristiti za dodavanje funkcionalnosti klizaču.
  • Editor koda: Možete koristiti bilo koji editor koda po svom izboru. Ja ću koristiti Visual Studio Code.
  • Zbirka slika.

Postavljanje projektne fascikle

Potrebna nam je projektna fascikla, fascikla za slike unutar nje, i HTML, CSS i JavaScript datoteke. Ja ću nazvati svoj projekat „Image-Slider“. Možete kreirati projekat ručno ili koristiti ove komande:

mkdir Image-Slider

cd Image-Slider

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

Dodajte sve vaše slike u fasciklu „Images“ koju ste kreirali unutar projektne fascikle i pređite na sledeći korak.

Ovo je moj direktorijum projekta, u koji sam dodao šest slika koje ću koristiti za kreiranje klizača. Sav HTML kod će biti u datoteci index.html.

Vrste klizača slika

Možemo imati dve osnovne vrste klizača slika: automatski klizač i automatski klizač sa dugmićima.

#1. Automatski klizač slika

Automatski klizač automatski prelazi na sledeću sliku nakon određenog vremena, na primer, nakon 3 sekunde.

HTML kod

Ovo je moj HTML kod:

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

Iz ovog koda možemo primetiti sledeće:

  • Povezao sam svoju CSS datoteku sa index.html u sekciji <head>. Ovo će se koristiti u kasnijim koracima.
  • Dodao sam JavaScript u svoj HTML kod neposredno pre zatvarajuće oznake <body>. JavaScript ću koristiti da dodam funkcionalnost klizaču.
  • Svaki slajd ima klasu „slide“.
  • Koristio sam <img> tag za uvoz slika iz fascikle „Images“.

Stilizovanje automatskog klizača slika pomoću CSS-a

Sada možemo stilizovati naše slike, pošto smo već povezali CSS i HTML datoteke.

Dodajte sledeći kod u svoju CSS datoteku:

#slider {
  width: 80%;
}

.slide {
  width: 80%;
  display: none;
  position: relative;
}

.slide img {
  width: 80%;
  height: 80%;
}

.slide.active {
  display: block;
}

Iz ovog koda možemo primetiti sledeće:

  • Postavili smo širinu i visinu našeg klizača na 80%.
  • Postavili smo aktivni slajd na „display: block“, što znači da će samo aktivni slajd biti prikazan, dok će ostali biti sakriveni.

Kako dodati JavaScript da bi klizač slika bio funkcionalan

Dodajte sledeći kod u vašu datoteku 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";
}

Ovaj JavaScript radi sledeće:

  • Koristimo document.querySelectorAll da ciljamo sve elemente sa klasom „slide“.
  • Postavljamo početnu vrednost currentSlide na 0.
  • Postavili smo slideInterval na 2000 (2 sekunde), što znači da se slike u klizaču menjaju svake 2 sekunde.
  • Kod slides[currentSlide].className = 'slide'; uklanja aktivnu klasu sa trenutnog slajda.
  • Kod currentSlide = (currentSlide + 1) % slides.length; povećava trenutni indeks slajda.
  • Kod slides[currentSlide].className = 'slide active'; dodaje aktivnu klasu trenutnom slajdu.

Automatski klizač radi na sledeći način:

#2. Automatski klizač sa dugmićima

Klizač slika koji smo kreirali automatski se pomera nakon svake 2 sekunde. Sada možemo kreirati klizač gde korisnici mogu da pređu na sledeći slajd klikom na dugme ili da se slajdovi automatski pomeraju nakon 3 sekunde ako korisnik ne klikne na dugmiće.

HTML kod

Možete promeniti sadržaj vaše index.html datoteke na sledeći način:

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

Ovaj HTML kod radi na sledeći način:

  • Imamo klasu pod nazivom „mySlides“ koja sadrži pet naših slika.
  • Imamo dva dugmeta, „prev“ i „next“ sa onClick, omogućavajući korisnicima da se kreću kroz slajdove.
  • Imamo sličice koje prikazuju slike u donjem delu veb stranice.

CSS kod

Dodajte ovo vašem CSS kodu:

* {
  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 kod radi na sledeći način:

  • Postavili smo svojstvo prikaza klase .mySlides kao none, što znači da su svi slajdovi skriveni po podrazumevanoj vrednosti.
  • Postavili smo neprozirnost sličica na koje se lebdi kursor na 1 kroz aktivno pravilo .demo:hover {opacity: 1;}.

JavaScript kod

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

Naš JavaScript kod radi sledeće:

  • Imamo funkciju currentSlide sa vrednošću prikaza postavljenu na none. Ovo pravilo omogućava našoj veb stranici da prikaže samo trenutni slajd.
  • Imamo funkciju plusSlides koja dodaje/oduzima datu vrednost iz slideIndex da bi odredila koji slajd da prikažemo.
  • Ako korisnik ne klikne na dugmiće, slajdovi će se automatski pomerati nakon svakih 3000 milisekundi.
  • Zaustavlja automatsku promenu slajdova kada se kursor miša nalazi iznad klizača, i nastavlja automatsku promenu kada kursor izađe iz klizača.

Ako korisnik koristi karticu za navigaciju, naš klizač slika će raditi na sledeći način:

Ako korisnik ne koristi dugmiće za navigaciju, klizač slika će se automatski pomerati nakon svake 3 sekunde na sledeći način:

Testiranje i otklanjanje grešaka klizača slika

Greške su sastavni deo programiranja, i njihovo postojanje u kodu ne znači da ste loš programer. Ako vaš kod ne radi čak ni nakon što ste pratili gore navedene korake, možete isprobati ove opcije za testiranje i otklanjanje grešaka kako biste ispravili greške:

  • Otklonite greške u svakoj datoteci pojedinačno: Naš kod se sastoji od tri datoteke: HTML, CSS i JavaScript. Svaki jezik ima svoja pravila. Možete proveriti da li su vaš HTML, CSS i JavaScript kodovi ispravni koristeći alate kao što su W3C Markup Validation Service za HTML, CSS Validator za CSS, i Chrome DevTools za testiranje vašeg JavaScript koda.
  • Izvršite različite tipove testova: možete uraditi vizuelne testove da biste bili sigurni da su slike prikazane ispravno, testove performansi da biste proverili da li slike reaguju, i funkcionalne testove da biste bili sigurni da je navigacija kroz slike funkcionalna.
  • Testirajte svoj kod sa različitim formatima i veličinama slika: Dobar klizač slika treba da radi sa različitim formatima i veličinama slika.
  • Automatizujte vaše testove: Automatizacija je široko rasprostranjena i možete imati koristi od nje prilikom testiranja. Možete koristiti alate kao što su Selenium ili LoadRunner za pisanje i izvršavanje skripti za automatizaciju testova. Ovi alati vam takođe omogućavaju da ponovo koristite neke od vaših testova.
  • Dokumentujte svoje testove: Testiranje je kontinuiran proces. Možda ćete morati da nastavite da poboljšavate vaše testove sve dok vaš kod ne bude funkcionisao kako se očekuje. Dokumentujte ovaj proces kako bi vaš kod bio čitljiv i lako dostupan za referencu.

Klizači slika: najbolje prakse

  • Budite jednostavni: klizači su privlačni, ali ograničite broj slika u klizaču. Idealan broj je između 4 i 7 slika po klizaču.
  • Testirajte svoje klizače: testirajte njihovu funkcionalnost pre nego što ih objavite na internetu.
  • Kreirajte klizače koji su prilagodljivi različitim veličinama ekrana: proverite da li se vaši klizači pravilno prikazuju na različitim veličinama ekrana.
  • Koristite slike visokog kvaliteta: koristite slike visokog kvaliteta za vaše klizače. Čuvanje slika u SVG formatu je odličan pristup, jer ne gube kvalitet kada im promenite veličinu.
  • Promenite veličinu slika: moguće je da imate slike različitih veličina i formata. Uvek vodite računa da slike u klizaču budu iste veličine. To možete postići pomoću CSS-a.

Zaključak

Nadam se da sada možete da kreirate potpuno funkcionalan klizač slika za prikaz važnih informacija na vašoj veb lokaciji bez korišćenja UI framework-a. Isti pristup možete koristiti za kreiranje video klizača na veb stranicama.