Sådan opretter du billedskyder med JavaScript for at forstærke dit websted

Af
Tweet
Share
Share
Pin

Har du nogensinde befundet dig i en situation, hvor du ønsker at vise flere billeder/videoer på et afsnit af en webside, men ikke ønsker at optage meget plads? Vil du tilføje interaktivitet til dine websider eller gøre dem mere attraktive?

En billedskyder kan spare dig for kampen. I denne artikel vil vi definere en billedskyder, forudsætningerne for at oprette en billedskyder, og hvordan man opretter en ved hjælp af HTML, JavaScript og CSS.

Hvad er en billedskyder?

Skydere er karruseller eller diasshow, der viser tekster, billeder eller videoer. Denne artikel vil fokusere på billedskydere. De fleste webudviklere bruger skydere på hjemmesiden til at fremvise for at promovere tilbud eller de vigtigste oplysninger.

Dette er nogle grunde til, at du bør bruge skydere på dine websider.

  • Forbedre brugeroplevelsen: En ideel webside skal være kompakt, så slutbrugere ikke behøver at scrolle og scrolle for at få vigtige data. Hvis du har flere billeder, kan du spare brugere for besværet med at rulle ved at vise dem i en skyder.
  • Visuel appel: De fleste webstedsbrugere vil ikke bruge meget tid på en almindelig webside. Du kan forbedre den visuelle appel med skydere og animationer.
  • Spar plads: Hvis du har 20 billeder, du vil have vist på din webside, kan de optage meget plads. Oprettelse af en skyder vil give dig mulighed for at spare plads og stadig give brugerne adgang til dem alle.
  • Vis dynamisk indhold: Du kan bruge skydere til at vise dynamisk indhold såsom indlejrede sociale medier, blogs og nyheder.

Forudsætninger for at oprette en billedskyder

  • En grundlæggende forståelse af HTML: Vi skal beskrive skyderens struktur her. Du bør være fortrolig med at arbejde med forskellige HTML-tags, klasser og divs.
  • En grundlæggende forståelse af CSS: Vi skal bruge CSS til at style vores billedskydere og knapper.
  • En grundlæggende forståelse af JavaScript: Vi skal bruge JavaScript til at gøre billedskyderne responsive.
  • En kodeeditor: Du kan bruge din valgfri kodeeditor. Jeg vil bruge Visual Studio Code.
  • En samling af billeder.

Opsæt projektmappen

Vi har brug for en projektmappe, en billedmappe inde i den og HTML-, CSS- og JavaScript-filer. Jeg vil navngive mit projekt “Image-Slider”. Du kan oprette dit projekt manuelt eller bruge disse kommandoer til at komme i gang;

mkdir Image-Slider

  NOTEify Tag noter under telefonopkald og administrer kontakter

cd Image-Slider

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

Tilføj alle dine billeder til mappen “Billeder”, vi oprettede i projektmappen, og gå videre til næste trin.

Dette er min projektmappe, hvor jeg har tilføjet seks billeder, som jeg vil bruge til at lave en skyder. Al vores HTML-kode vil være i filen index.html.

Typer af billedskydere

Vi kan have to typer Image Sliders; en automatisk skyder og en automatisk billedskyder med knapper.

#1. Automatisk billedskyder

En automatisk skyder ruller automatisk til det næste billede efter en given tid, f.eks. 3 sekunder.

HTML-kode

Dette er min HTML-kode;

<!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 kode kan vi bemærke følgende;

  • Jeg har importeret min CSS-fil til index.html i -sektionen. Dette vil blive brugt i senere trin.
  • Jeg har tilføjet JavaScript til min HTML-kode lige før det afsluttende -tag. Jeg vil bruge JavaScript til at tilføje funktionalitet til skyderne.
  • Hver rutsjebane har en klasse af rutsjebane.
  • Jeg har brugt tagget til at importere billeder fra mappen Billeder.

Stil den automatiske billedskyder ved hjælp af CSS

Vi kan nu style vores billeder, da vi allerede har linket CSS- og HTML-filer.

Tilføj denne kode til din CSS-fil;

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

Fra denne kode kan vi bemærke følgende;

  • Vi har bredden og højden af ​​vores skyder til 80%
  • Vi har sat det aktive dias til at blokere, hvilket betyder, at kun det aktive dias vil blive vist, mens resten er skjult.

Sådan tilføjer du JavaScript for at gøre billedskyderen responsiv

Tilføj denne kode til din script.js fil;

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

Denne JavaScript gør følgende;

  • Vi bruger document.querySelectorAll selector til at målrette mod alle elementer med en klasse af slide.
  • Vi giver den aktuelle Slide 0-startværdi.
  • Vi indstiller slideInterval til 2000 (2 sekunder), hvilket betyder, at billederne i skyderen ændres efter hvert 2. sekund.
  • Denne kode glider[currentSlide].className = ‘slide’; fjerner den aktive klasse fra det aktuelle dias
  • Denne kode currentSlide = (currentSlide + 1) % slides.length; øger det aktuelle diasindeks.
  • Denne kode glider[currentSlide].className = ‘slide aktivt’; føjer aktiv klasse til det aktuelle dias.

Den automatiske skyder fungerer som følger;

#2. Automatisk skyder med knapper

Billedskyderen, vi oprettede, ruller automatisk efter hvert 2. sekund. Vi kan nu oprette et billede, hvor brugere kan flytte til næste dias ved at klikke på en knap eller automatisk scrolle efter hvert 3. sekund, hvis brugeren ikke klikker på knapperne.

HTML-kode

Du kan ændre indholdet af din index.html fil 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-kode fungerer som følger;

  • Vi har en klasse ved navn mySlides, der bærer vores fem billeder.
  • Vi har to knapper, “forrige” og “næste” med et onClick, som giver brugerne mulighed for at rulle gennem slides.
  • Vi har et miniaturebillede, der viser billederne nederst på websiden.

CSS kode

Tilføj dette til din kode;

* {
  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 indstillet .mySlides-klassens display-egenskab som ingen, hvilket betyder, at alle slides er skjult som standard.
  • Vi har indstillet opaciteten for de miniaturebilleder, der svæves på, som 1 gennem den aktive, .demo:hover {opacitet: 1;} regel.

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 kildekode her.

Vores JavaScript-kode gør følgende;

  • Vi har en currentSlide-funktion med en visningsværdi sat som ingen. Denne regel tillader vores webside kun at vise det aktuelle dias.
  • Vi har en plusSlides-funktion, der tilføjer/fratrækker den givne værdi fra slideIndex for at bestemme, hvilket slide, der skal vises.
  • Hvis brugeren ikke klikker på knapperne, vil slides automatisk rulle efter hver 3000 millisekund.

Hvis en bruger bruger navigationsfanen, vil vores billedskyder fungere som følger;

Hvis brugeren ikke bruger navigationsknapperne, vil billedskyderen automatisk rulle efter hvert 3. sekund som følger;

Test og fejlfind billedskyderen

Fejl og fejl er en del af en udviklers rejse, og at have dem i din kode betyder ikke, at du er en dårlig udvikler. Hvis din kode ikke virker, selv efter at du har fulgt ovenstående trin, kan du prøve disse test- og fejlfindingsmuligheder for at rette fejl:

  • Debug hver fil separat: Vores kode har tre filer, HTML-, CSS- og JavaScript-filer. De tre sprog har forskellige regler. Du kan kontrollere, om dine HTML-, CSS- og JavaScript-koder er gyldige ved hjælp af værktøjer såsom W3C Markup Validation Service for HTML, CSS Validator for din CSS-kode og Chrome DevTools til at teste din JavaScript-kode.
  • Udfør forskellige testtyper: Du kan lave visuelle test for at sikre, at billederne vises korrekt, ydeevnetest for at kontrollere, om billederne er responsive, og funktionelle tests for at sikre, at billederne er navigerbare.
  • Test din kode med forskellige billedformater og størrelser: En god billedskyder bør fungere med forskellige billedformater og størrelser.
  • Automatiser dine tests: Automatisering er overalt, og du kan også drage fordel af det i test. Du kan bruge værktøjer som Selenium eller LoadRunner til at skrive og udføre testautomatiseringsscripts. Disse værktøjer giver dig også mulighed for at genbruge nogle af dine tests.
  • Dokumenter dine tests: Test er en kontinuerlig proces. Du skal muligvis blive ved med at forbedre dine tests, indtil din kode fungerer som forventet. Dokumenter denne proces for at gøre din kode læsbar og nem at referere til.

Billedskydere: Bedste praksis

  • Hold det enkelt: Skydere er attraktive. Hold dog antallet af billeder i en skyder lavt. Noget som 4-7 billeder pr. dias er ideelt.
  • Test dine skydere: Test dem for funktionalitet, før du udgiver dem online.
  • Opret responsive skydere: Sørg for, at dine oprettede skydere reagerer på forskellige skærmstørrelser.
  • Brug billeder i høj kvalitet: Tag/download billeder i høj kvalitet til dine skydere. At gemme dine billeder i SVG-formatet er en fantastisk tilgang, da de ikke mister deres kvalitet, når du ændrer størrelsen på dem.
  • Ændre størrelsen på dine billeder: Du kan have forskellige billedstørrelser og -formater. Sørg altid for, at billederne i en skyder er af samme størrelse. Du kan opnå dette gennem CSS.

Afslutter

Vi håber, at du nu kan oprette en fuldt funktionel billedskyder til at vise vigtige data på dit websted uden at bruge UI-rammer. Du kan bruge den samme tilgang til at oprette videoskydere på websider.