adminvista.com

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

By rik

Skapa interaktiva bildspel för din webbplats

Har du någonsin velat visa flera bilder eller videor på en webbsida utan att det tar upp för mycket utrymme? Eller kanske du vill göra dina sidor mer dynamiska och engagerande?

Ett bildspel, eller en ”slider”, kan vara lösningen. I den här artikeln ska vi gå igenom vad ett bildspel är, vilka förutsättningar som finns och hur du bygger ett med HTML, JavaScript och CSS.

Vad är ett bildspel?

Bildspel, även kallade karuseller, används för att presentera text, bilder eller videor på ett dynamiskt sätt. Fokus här ligger på bildspel. Många webbutvecklare använder bildspel på startsidor för att lyfta fram erbjudanden eller viktig information.

Här är några goda skäl att använda bildspel på din webbplats:

  • Förbättrad användarupplevelse: En bra webbsida är kompakt och överskådlig. Om du har många bilder kan ett bildspel spara besökarna från att behöva scrolla onödigt mycket.
  • Visuellt tilltalande: De flesta webbplatsbesökare spenderar inte lång tid på statiska sidor. Med bildspel och animationer kan du göra sidan mer engagerande.
  • Utrymmesbesparing: Om du vill visa 20 bilder på din sida kan det ta upp mycket plats. Ett bildspel låter dig spara utrymme utan att användarna går miste om något.
  • Dynamiskt innehåll: Du kan använda bildspel för att visa dynamiskt innehåll som inbäddningar från sociala medier, blogginlägg eller nyheter.

Förutsättningar för att bygga ett bildspel

  • Grundläggande HTML-kunskaper: Du behöver förstå hur du strukturerar ett bildspel med HTML-taggar, klasser och div-element.
  • Grundläggande CSS-kunskaper: CSS används för att designa bildspelets utseende och knappar.
  • Grundläggande JavaScript-kunskaper: JavaScript gör bildspelet interaktivt och responsivt.
  • En kodredigerare: Du kan välja din favoritredigerare. Vi rekommenderar Visual Studio Code.
  • En samling bilder.

Skapa en projektmapp

Vi behöver en projektmapp, en undermapp för bilder och HTML-, CSS- och JavaScript-filer. Vi kommer att kalla projektet ”Image-Slider”. Du kan skapa projektet manuellt eller använda dessa kommandon:

mkdir Image-Slider

cd Image-Slider

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

Lägg till dina bilder i mappen ”Bilder” och fortsätt till nästa steg.

Här är ett exempel på en projektmapp med sex bilder som vi ska använda i vårt bildspel. All HTML-kod kommer att finnas i filen index.html.

Olika typer av bildspel

Det finns huvudsakligen två typer av bildspel: automatiska bildspel och automatiska bildspel med navigeringsknappar.

#1. Automatiskt bildspel

Ett automatiskt bildspel växlar till nästa bild efter en viss tid, till exempel var tredje sekund.

HTML-kod

Här är HTML-koden för det automatiska bildspelet:

      <!DOCTYPE html>
      <html lang="sv">
      <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>Bildspel</title>
          <link rel="stylesheet" href="styles.css">
          
      </head>
      <body>
        <div id="slider">
          <div class="slide">
              <h1>Afrikansk</h1>
            <img src="Images/img1.jpg" >
          </div>
          <div class="slide">
              <h1>Amerikansk</h1>
            <img src="Images/img2.jpg" >
          </div>
          <div class="slide">
              <h1>Asiatisk</h1>
            <img src="Images/img3.jpg" >
          </div>
          <div class="slide">
              <h1>Arabisk</h1>
            <img src="Images/img4.jpg" >
          </div>
          <div class="slide">
              <h1>Modern</h1>
            <img src="Images/img5.jpg" >
          </div>
          <div class="slide">
              <h1>Europeisk</h1>
            <img src="Images/img6.jpg" >
          </div>
        </div>
        <script src="script.js"></script>
      </body>
      </html>

Här är några viktiga punkter:

  • CSS-filen (styles.css) är länkad i <head>-sektionen.
  • JavaScript-filen (script.js) är länkad precis före den avslutande <body>-taggen.
  • Varje bild presenteras i en div med klassen ”slide”.
  • <img>-taggen används för att lägga till bilderna från ”Bilder”-mappen.

CSS för att designa det automatiska bildspelet

Nu kan vi designa bilderna med CSS. Lägg till följande kod i din CSS-fil (styles.css):

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

Viktiga saker att notera:

  • Bildspelet har en bredd och höjd på 80%.
  • Klassen ”active” används för att visa den aktuella bilden, medan andra är dolda.

JavaScript för att göra bildspelet responsivt

Lägg till följande JavaScript-kod 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";
      }

JavaScript-koden fungerar så här:

  • document.querySelectorAll('.slide') används för att välja alla element med klassen ”slide”.
  • currentSlide initialiseras till 0.
  • slideInterval är inställt på 2000 millisekunder (2 sekunder), vilket innebär att bilderna växlas varannan sekund.
  • Funktionen nextSlide() tar bort klassen ”active” från den aktuella bilden, ökar index och lägger till ”active” till nästa bild.

Så fungerar det automatiska bildspelet:

#2. Automatiskt bildspel med knappar

Vi kan nu skapa ett bildspel där användare kan bläddra genom bilderna med knappar, eller låta det växla automatiskt 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="sv">
        <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>Bildspel</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>

HTML-koden fungerar så här:

  • Div-element med klassen ”mySlides” innehåller de fem bilderna.
  • Knapparna ”prev” och ”next” har onclick-attribut som låter användaren bläddra mellan bilderna.
  • Miniatyrbilder visas längst ner på webbsidan.

CSS-kod

Lägg till följande CSS-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 gör följande:

  • .mySlides har display: none; som standard, vilket gör att alla bilder är dolda.
  • Miniatyrbilderna är transparenta, och den aktiva bilden är opacitet: 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('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;
      }

JavaScript-koden fungerar så här:

  • showSlides()-funktionen används för att visa endast den aktuella bilden.
  • plusSlides() ökar eller minskar slideIndex för att bestämma vilken bild som ska visas.
  • Bilderna växlar automatiskt var 3000:e millisekund om användaren inte använder knapparna.

Så här fungerar bildspelet när användaren navigerar med knapparna:

Så här fungerar bildspelet automatiskt:

Testa och felsök bildspelet

Att stöta på problem är en del av utvecklingsprocessen. Om koden inte fungerar som den ska efter att du följt stegen ovan kan du prova dessa felsökningsmetoder:

  • Felsök varje fil separat: Vår kod har tre filer: HTML, CSS och JavaScript. Kontrollera att HTML-, CSS- och JavaScript-koden är korrekt med hjälp av verktyg som W3C Markup Validation Service för HTML, CSS Validator för CSS-koden och Chrome DevTools för JavaScript-koden.
  • Gör olika typer av tester: Du kan göra visuella tester för att säkerställa att bilderna visas korrekt, prestandatester för att se om bilderna laddar snabbt och funktionstester för att säkerställa att bildspelet fungerar som det ska.
  • Testa med olika bildformat och storlekar: Ett bra bildspel ska fungera med olika bildformat och storlekar.
  • Automatisera tester: Du kan använda verktyg som Selenium eller LoadRunner för att skriva automatiserade testskript.
  • Dokumentera tester: Dokumentera testprocessen så att koden är enkel att förstå och referera till.

Bildspel: Bästa praxis

  • Håll det enkelt: Begränsa antalet bilder i ett bildspel. 4-7 bilder är lagom.
  • Testa bildspelet: Testa att det fungerar som det ska innan du publicerar det på nätet.
  • Skapa responsiva bildspel: Se till att bildspelet ser bra ut på olika skärmstorlekar.
  • Använd högkvalitativa bilder: Använd bilder av hög kvalitet. Spara bilderna i SVG-format, eftersom de inte tappar kvalitet när de ändras i storlek.
  • Ändra bildstorlekar: Se till att bilderna i ett bildspel har samma storlek. Du kan uppnå detta med CSS.

Slutsats

Vi hoppas att du nu kan skapa fungerande bildspel för att visa viktig information på din webbplats. Du kan använda samma metoder för att skapa videobildspel.

Google introducerar lösenord och Microsoft Pegasus för nystartade företag

Dör din dator? Guide för att kontrollera din dators hårdvara