Hur man skapar Image Slider med JavaScript för att förstärka din webbplats

av

Har du någonsin hamnat i en situation där du vill visa flera bilder/videor på en del av en webbsida men inte vill ta upp mycket utrymme? Vill du lägga till interaktivitet på dina webbsidor eller göra dem mer attraktiva?

En bildreglage kan rädda dig kampen. I den här artikeln kommer vi att definiera ett bildreglage, förutsättningarna för att skapa ett bildreglage och hur man skapar ett med HTML, JavaScript och CSS.

Vad är en bildskjutare?

Reglage är karuseller eller bildspel som visar texter, bilder eller videor. Den här artikeln kommer att fokusera på bildreglage. De flesta webbutvecklare använder skjutreglage på hemsidan för att visa upp för att marknadsföra erbjudanden eller den viktigaste informationen.

Det här är några anledningar till att du bör använda reglage på dina webbsidor.

  • Förbättra användarupplevelsen: En idealisk webbsida bör vara kompakt så att slutanvändare inte behöver rulla och scrolla för att få viktig data. Om du har flera bilder kan du spara användarna besväret med att rulla genom att visa dem i ett skjutreglage.
  • Visuell tilltalande: De flesta webbplatsanvändare kommer inte att spendera mycket tid på en vanlig webbsida. Du kan förbättra den visuella överklagandet med reglage och animationer.
  • Spara utrymme: Om du har 20 bilder som du vill visa på din webbsida kan de ta upp mycket utrymme. Genom att skapa ett skjutreglage kan du spara utrymme och fortfarande tillåta användare att komma åt dem alla.
  • Visa dynamiskt innehåll: Du kan använda reglagen för att visa dynamiskt innehåll som inbäddningar i sociala medier, bloggar och nyheter.

Förutsättningar för att skapa en bildskjutare

  • En grundläggande förståelse för HTML: Vi ska beskriva skjutreglagets struktur här. Du bör vara bekväm med att arbeta med olika HTML-taggar, klasser och divs.
  • En grundläggande förståelse för CSS: Vi ska använda CSS för att utforma våra bildreglage och knappar.
  • En grundläggande förståelse för JavaScript: Vi ska använda JavaScript för att göra bildreglagen responsiva.
  • En kodredigerare: Du kan använda din valda kodredigerare. Jag kommer att använda Visual Studio Code.
  • En samling bilder.

Konfigurera projektmappen

Vi behöver en projektmapp, en bildmapp inuti den och HTML-, CSS- och JavaScript-filer. Jag kommer att döpa mitt projekt till ”Image-Slider”. Du kan skapa ditt projekt manuellt eller använda dessa kommandon för att komma igång;

mkdir Image-Slider

cd Image-Slider

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

Lägg till alla dina bilder i mappen ”Bilder” som vi skapade i projektmappen och gå vidare till nästa steg.

Det här är min projektmapp, där jag har lagt till sex bilder som jag ska använda för att skapa en skjutreglage. All vår HTML-kod kommer att finnas i filen index.html.

Typer av bildskjutare

Vi kan ha två typer av bildskjutare; ett automatiskt reglage och ett automatiskt bildreglage med knappar.

#1. Automatisk bildskjutare

En automatisk skjutreglage rullar automatiskt till nästa bild efter en viss tid, till exempel 3 sekunder.

HTML-kod

Detta är min 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="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>

Från denna kod kan vi notera följande;

  • Jag har importerat min CSS-fil till index.html i avsnittet . Detta kommer att användas i senare steg.

  • Jag har lagt till JavaScript i min HTML-kod precis före den avslutande -taggen. Jag kommer att använda JavaScript för att lägga till funktionalitet till skjutreglagen.
  • Varje rutschkana har en klass av rutschkana.
  • Jag har använt taggen för att importera bilder från mappen Bilder.

Stil det automatiska bildreglaget med CSS

Vi kan nu styla våra bilder eftersom vi redan har länkat CSS- och HTML-filer.

Lägg till den här koden i din CSS-fil;

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

Från denna kod kan vi notera följande;

  • Vi har bredden och höjden på vårt reglage till 80%
  • Vi har ställt in den aktiva bilden på att blockera, vilket betyder att endast den aktiva bilden kommer att visas medan resten är dolda.

Hur man lägger till JavaScript för att göra bildreglaget responsivt

Lägg till den här koden i 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";
}

Detta JavaScript gör följande;

  • Vi använder document.querySelectorAll selector för att rikta in alla element med en bildklass.
  • Vi ger initialvärdet för currentSlide 0.
  • Vi ställer in slideInterval till 2000 (2 sekunder), vilket innebär att bilderna i skjutreglaget ändras varannan sekund.
  • Denna kod glider[currentSlide].className = ’slide’; tar bort aktiv klass från den aktuella bilden
  • Denna kod currentSlide = (currentSlide + 1) % slides.length; ökar det aktuella bildindexet.
  • Denna kod glider[currentSlide].className = ’slide active’; lägger till aktiv klass till den aktuella bilden.

Det automatiska skjutreglaget fungerar enligt följande;

#2. Automatisk skjutreglage med knappar

Bildreglaget vi skapade rullar automatiskt efter varannan sekund. Vi kan nu skapa en bild där användare kan flytta till nästa bild genom att klicka på en knapp eller rulla automatiskt efter var tredje sekund om användaren inte klickar på knapparna.

HTML-kod

Du kan ändra innehållet i din index.html-fil enligt följande;

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

Denna HTML-kod fungerar enligt följande;

  • Vi har en klass som heter mySlides som bär våra fem bilder.
  • Vi har två knappar, ”föregående” och ”nästa” med ett onClick, som låter användare bläddra igenom bilderna.
  • Vi har en miniatyr som visar bilderna längst ner på webbsidan.

CSS-kod

Lägg till detta i din kod;

* {
  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 fungerar enligt följande;

  • Vi har ställt in .mySlides-klassens display-egenskap som ingen, vilket betyder att alla bilder är dolda som standard.
  • Vi har ställt in opaciteten för de miniatyrer som hålls på som 1 genom den aktiva, .demo:hover {opacitet: 1;} regel.

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('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 slutliga källkoden här.

Vår JavaScript-kod gör följande;

  • Vi har en currentSlide-funktion med ett visningsvärde inställt som inget. Denna regel tillåter vår webbsida att endast visa den aktuella bilden.
  • Vi har en plusSlides-funktion som adderar/subtraherar det givna värdet från slideIndex för att avgöra vilken bild som ska visas.
  • Om användaren inte klickar på knapparna kommer bilderna att rulla automatiskt efter var 3000:e millisekund.

Om en användare använder navigeringsfliken kommer vår bildreglage att fungera enligt följande;

Om användaren inte använder navigeringsknapparna rullar bildreglaget automatiskt efter var tredje sekund enligt följande;

Testa och felsöka bildreglaget

Fel och fel är en del av en utvecklares resa, och att ha dem i din kod betyder inte att du är en dålig utvecklare. Om din kod inte fungerar även efter att ha följt stegen ovan kan du prova dessa test- och felsökningsalternativ för att åtgärda fel:

  • Felsöka varje fil separat: Vår kod har tre filer, HTML-, CSS- och JavaScript-filer. De tre språken har olika regler. Du kan kontrollera om dina HTML-, CSS- och JavaScript-koder är giltiga med hjälp av verktyg som W3C Markup Validation Service för HTML, CSS Validator för din CSS-kod och Chrome DevTools för att testa din JavaScript-kod.
  • Utför olika testtyper: Du kan göra visuella tester för att säkerställa att bilderna visas korrekt, prestandatester för att kontrollera om bilderna är responsiva och funktionstester för att säkerställa att bilderna är navigerbara.
  • Testa din kod med olika bildformat och storlekar: En bra bildreglage bör fungera med olika bildformat och storlekar.
  • Automatisera dina tester: Automatisering finns överallt, och du kan också dra nytta av det vid testning. Du kan använda verktyg som Selenium eller LoadRunner för att skriva och köra testautomatiseringsskript. Dessa verktyg låter dig också återanvända några av dina tester.
  • Dokumentera dina tester: Testning är en kontinuerlig process. Du kan behöva fortsätta att förbättra dina tester tills din kod fungerar som förväntat. Dokumentera denna process för att göra din kod läsbar och lätt att referera.

Bildreglage: Bästa metoder

  • Håll det enkelt: Reglage är attraktiva. Håll dock antalet bilder i ett reglage lågt. Något som 4-7 bilder per bild är idealiskt.
  • Testa dina reglage: Testa dem för funktionalitet innan du publicerar dem online.
  • Skapa responsiva reglage: Se till att dina skapade reglage är lyhörda för olika skärmstorlekar.
  • Använd högkvalitativa bilder: Ta/ladda ner högkvalitativa bilder för dina skjutreglage. Att spara dina bilder i SVG-formatet är en fantastisk metod, eftersom de inte förlorar sin kvalitet när du ändrar storlek på dem.
  • Ändra storlek på dina bilder: Du kan ha olika bildstorlekar och format. Se alltid till att bilderna i ett reglage är av samma storlek. Du kan uppnå detta genom CSS.

Avslutar

Vi hoppas att du nu kan skapa ett fullt fungerande bildreglage för att visa viktig data på din webbplats utan att använda UI-ramverk. Du kan använda samma tillvägagångssätt för att skapa videoreglage på webbsidor.