Hvordan lage bildeglidebryter med JavaScript for å forsterke nettstedet ditt

by
Tweet
Share
Share
Pin
0 Shares

Har du noen gang havnet i en situasjon der du ønsker å vise flere bilder/videoer på en del av en nettside, men ikke ønsker å oppta mye plass? Vil du legge til interaktivitet på nettsidene dine eller gjøre dem mer attraktive?

En bildeglidebryter kan spare deg for kampen. I denne artikkelen vil vi definere en bildeglidebryter, forutsetningene for å lage en bildeglidebryter, og hvordan du oppretter en ved hjelp av HTML, JavaScript og CSS.

Hva er en bildeglidebryter?

Skyveknapper er karuseller eller lysbildefremvisninger som viser tekst, bilder eller videoer. Denne artikkelen vil fokusere på skyveknapper. De fleste nettutviklere bruker skyveknapper på hjemmesiden for å vise frem tilbud eller den viktigste informasjonen.

Dette er noen grunner til at du bør bruke skyveknapper på nettsidene dine.

  • Forbedre brukeropplevelsen: En ideell nettside bør være kompakt slik at sluttbrukere ikke trenger å rulle og rulle for å få viktige data. Hvis du har flere bilder, kan du spare brukerne for å bla ved å vise dem i en glidebryter.
  • Visuell appell: De fleste nettstedbrukere vil ikke bruke mye tid på en vanlig nettside. Du kan forbedre den visuelle appellen med skyveknapper og animasjoner.
  • Spar plass: Hvis du har omtrent 20 bilder du vil vise på nettsiden din, kan de ta opp mye plass. Hvis du oppretter en glidebryter, kan du spare plass og fortsatt gi brukere tilgang til dem alle.
  • Vis dynamisk innhold: Du kan bruke glidebrytere til å vise dynamisk innhold som innebygde sosiale medier, blogger og nyheter.

Forutsetninger for å lage en bildeglidebryter

  • En grunnleggende forståelse av HTML: Vi skal beskrive glidebryterens struktur her. Du bør være komfortabel med å jobbe med ulike HTML-tagger, klasser og divs.
  • En grunnleggende forståelse av CSS: Vi skal bruke CSS til å style våre bildeglidere og knapper.
  • En grunnleggende forståelse av JavaScript: Vi skal bruke JavaScript for å gjøre bildeglidebryterne responsive.
  • Et koderedigeringsprogram: Du kan bruke ditt valgfrie koderedigeringsprogram. Jeg skal bruke Visual Studio Code.
  • En samling bilder.

Sett opp prosjektmappen

Vi trenger en prosjektmappe, en bildemappe inne i den, og HTML-, CSS- og JavaScript-filer. Jeg vil kalle prosjektet mitt «Image-Slider». Du kan opprette prosjektet manuelt eller bruke disse kommandoene for å komme i gang;

mkdir Image-Slider

cd Image-Slider

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

  Hvordan fjernåpne en GUI-applikasjon med PuTTY

Legg til alle bildene dine i «Bilder»-mappen vi opprettet i prosjektmappen og gå videre til neste trinn.

Dette er prosjektmappen min, hvor jeg har lagt til seks bilder som jeg skal bruke til å lage en glidebryter. All HTML-koden vår vil være i index.html-filen.

Typer bildeglidere

Vi kan ha to typer Image Sliders; en automatisk skyveknapp og en automatisk bildeglidebryter med knapper.

#1. Automatisk bildeglidebryter

En automatisk skyveknapp ruller automatisk til neste bilde etter en gitt tid, for eksempel 3 sekunder.

HTML-kode

Dette er HTML-koden min;

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

Fra denne koden kan vi merke oss følgende;

  • Jeg har importert CSS-filen min til index.html i -delen. Dette vil bli brukt i senere trinn.
  • Jeg har lagt til JavaScript i HTML-koden min rett før den avsluttende -taggen. Jeg vil bruke JavaScript for å legge til funksjonalitet til glidebryterne.
  • Hvert lysbilde har en klasse med lysbilde.
  • Jeg har brukt -taggen til å importere bilder fra Bilder-mappen.

Stil den automatiske bildeglidebryteren med CSS

Vi kan nå style bildene våre siden vi allerede har koblet sammen CSS- og HTML-filer.

Legg til denne koden i CSS-filen din;

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

Fra denne koden kan vi merke oss følgende;

  • Vi har bredden og høyden på glidebryteren vår til 80 %
  • Vi har satt det aktive lysbildet til å blokkere, noe som betyr at bare det aktive lysbildet vil vises mens resten er skjult.

Hvordan legge til JavaScript for å gjøre bildeglidebryteren responsiv

Legg til denne koden i filen 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";
}

Dette JavaScript gjør følgende;

  • Vi bruker document.querySelectorAll selector for å målrette alle elementer med en lysbildeklasse.
  • Vi gir den aktuelle Slide 0-startverdien.
  • Vi setter slideInterval til 2000 (2 sekunder), noe som betyr at bildene i glidebryteren endres etter hvert 2. sekund.
  • Denne koden glir[currentSlide].className = «slide»; fjerner aktiv klasse fra gjeldende lysbilde
  • Denne koden currentSlide = (currentSlide + 1) % slides.length; øker gjeldende lysbildeindeks.
  • Denne koden glir[currentSlide].className = «lysbilde aktivt»; legger til aktiv klasse til gjeldende lysbilde.

Den automatiske glidebryteren fungerer som følger;

#2. Automatisk skyveknapp med knapper

Bildeskyveknappen vi laget ruller automatisk etter hvert 2. sekund. Vi kan nå lage et bilde der brukere kan gå til neste lysbilde ved å klikke på en knapp eller automatisk rulle etter hvert 3. sekund hvis brukeren ikke klikker på knappene.

HTML-kode

Du kan endre innholdet i index.html-filen din som følger;

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

Denne HTML-koden fungerer som følger;

  • Vi har en klasse som heter mySlides som bærer våre fem bilder.
  • Vi har to knapper, «forrige» og «neste» med et onClick, som lar brukerne bla gjennom lysbildene.
  • Vi har et miniatyrbilde som viser bildene nederst på nettsiden.

CSS-kode

Legg dette til koden din;

* {
  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-koden fungerer som følger;

  • Vi har satt .mySlides-klassevisningsegenskapen som ingen, noe som betyr at alle lysbildene er skjult som standard.
  • Vi har satt opasiteten til miniatyrbildene som holdes på som 1 gjennom den aktive regelen .demo:hover {opacity: 1;}.

JavaScript-kode

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

Du kan få den endelige kildekoden her.

JavaScript-koden vår gjør følgende;

  • Vi har en currentSlide-funksjon med en visningsverdi satt som ingen. Denne regelen lar nettsiden vår kun vise det gjeldende lysbildet.
  • Vi har en plusSlides-funksjon som legger til/trekker fra den gitte verdien fra slideIndex for å bestemme hvilket lysbilde som skal vises.
  • Hvis brukeren ikke klikker på knappene, vil lysbildene automatisk rulle etter hvert 3000 millisekund.

Hvis en bruker bruker navigasjonsfanen, vil bildeglidebryteren vår fungere som følger;

Hvis brukeren ikke bruker navigasjonsknappene, vil bildeglidebryteren automatisk rulle etter hvert 3. sekund som følger;

Test og feilsøk bildeskyveknappen

Feil og feil er en del av en utviklers reise, og å ha dem i koden din betyr ikke at du er en dårlig utvikler. Hvis koden din ikke fungerer selv etter at du har fulgt trinnene nevnt ovenfor, kan du prøve disse test- og feilsøkingsalternativene for å fikse feil:

  • Feilsøk hver fil separat: Koden vår har tre filer, HTML-, CSS- og JavaScript-filer. De tre språkene har forskjellige regler. Du kan sjekke om HTML-, CSS- og JavaScript-kodene dine er gyldige ved å bruke verktøy som W3C Markup Validation Service for HTML, CSS Validator for CSS-koden og Chrome DevTools for å teste JavaScript-koden.
  • Utfør forskjellige testtyper: Du kan gjøre visuelle tester for å sikre at bildene vises riktig, ytelsestester for å sjekke om bildene er responsive og funksjonstester for å sikre at bildene er navigerbare.
  • Test koden din med forskjellige bildeformater og -størrelser: En god bildeglidebryter bør fungere med forskjellige bildeformater og -størrelser.
  • Automatiser testene dine: Automatisering er overalt, og du kan også dra nytte av det i testing. Du kan bruke verktøy som Selenium eller LoadRunner til å skrive og utføre testautomatiseringsskript. Disse verktøyene lar deg også gjenbruke noen av testene dine.
  • Dokumenter testene dine: Testing er en kontinuerlig prosess. Du må kanskje fortsette å forbedre testene dine til koden fungerer som forventet. Dokumenter denne prosessen for å gjøre koden din lesbar og enkel å referere til.

Bildeskyvere: Beste praksis

  • Hold det enkelt: Sliders er attraktive. Hold imidlertid antallet bilder i en glidebryter lavt. Noe sånt som 4-7 bilder per lysbilde er ideelt.
  • Test glidebryterne dine: Test dem for funksjonalitet før du publiserer dem på nettet.
  • Lag responsive skyveknapper: Sørg for at de opprettede glidebryterne dine reagerer på forskjellige skjermstørrelser.
  • Bruk bilder av høy kvalitet: Ta/last ned bilder av høy kvalitet for glidebryterne. Å lagre bildene dine i SVG-formatet er en fantastisk tilnærming, siden de ikke mister kvaliteten når du endrer størrelsen på dem.
  • Endre størrelsen på bildene dine: Du kan ha forskjellige bildestørrelser og formater. Sørg alltid for at bildene i en glidebryter har samme størrelse. Du kan oppnå dette gjennom CSS.

Innpakning

Vi håper du nå kan lage en fullt funksjonell bildeglidebryter for å vise viktige data på nettstedet ditt uten å bruke UI-rammer. Du kan bruke samme tilnærming til å lage videoglidere på nettsider.