Lag responsiv bildeglidebryter med JavaScript: Steg-for-steg guide

by
Tweet
Share
Share
Pin
0 Shares

Oppdag kunsten å lage engasjerende bildeslidere

Har du noen gang ønsket å presentere flere bilder eller videoer på en nettside uten å bruke opp for mye plass? Kanskje du ønsker å legge til litt interaktivitet eller gjøre siden din mer visuelt appellerende? En bildeslider kan være løsningen.

I denne artikkelen skal vi utforske hva en bildeslider er, hvilke forutsetninger som kreves for å lage en, og hvordan du kan bygge din egen ved hjelp av HTML, CSS og JavaScript.

Hva er egentlig en bildeslider?

Bildeslidere, også kjent som karuseller eller lysbildepresentasjoner, brukes for å vise tekst, bilder eller videoer på en dynamisk måte. I denne sammenhengen vil vi fokusere på bildeslidere. Mange webutviklere benytter slidere på hjemmesider for å fremheve tilbud eller presentere viktig informasjon.

Det er mange gode grunner til å bruke slidere på nettsidene dine:

  • Forbedret brukeropplevelse: En god nettside bør være oversiktlig slik at brukerne ikke må scrolle uendelig for å finne viktig informasjon. Hvis du har mange bilder, kan en slider hindre unødvendig scrolling.
  • Visuell tiltrekningskraft: Mange brukere bruker ikke lang tid på en ordinær nettside. Slidere og animasjoner kan gjøre siden din mer visuelt engasjerende.
  • Plassbesparende: Et stort antall bilder kan fort oppta mye plass. En slider gjør det mulig å vise mange bilder uten å overfylle siden.
  • Dynamisk innhold: Slidere kan brukes for å vise dynamisk innhold, som integrerte sosiale medier, blogger eller nyhetsoppdateringer.

Forutsetninger for å lage en bildeslider

  • Grunnleggende HTML-kunnskaper: Du bør ha en god forståelse av HTML for å kunne strukturere slideren. Dette inkluderer kjennskap til HTML-tagger, klasser og divs.
  • Grunnleggende CSS-kunnskaper: CSS vil være nødvendig for å style slideren og knappene dine.
  • Grunnleggende JavaScript-kunnskaper: JavaScript vil brukes for å gjøre slideren responsiv.
  • En tekstredigerer: Du kan bruke din foretrukne redigerer. Visual Studio Code anbefales.
  • En samling bilder: Du trenger bilder for å fylle slideren.

Sett opp prosjektmappen

Vi trenger en prosjektmappe, en mappe for bilder og filer for HTML, CSS og JavaScript. La oss kalle prosjektet vårt «Image-Slider». Du kan opprette mappen manuelt eller bruke følgende kommandoer:

mkdir Image-Slider

cd Image-Slider

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

Legg bildene dine i mappen «Bilder» og vi er klare for neste trinn.

Dette er min prosjektmappe med seks bilder som skal brukes i slideren. All HTML-koden vil ligge i filen `index.html`.

Ulike typer bildeslidere

Det finnes i hovedsak to typer bildeslidere: automatiske slidere og automatiske slidere med navigasjonsknapper.

#1. Automatisk bildeslider

En automatisk slider bytter automatisk til neste bilde etter et gitt tidsintervall, for eksempel 3 sekunder.

HTML-kode

Her er et eksempel på HTML-kode:

    <!DOCTYPE html>
    <html lang="no">
    <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>Bildeslider</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">
          <h2>Afrikansk</h2>
          <img src="Bilder/img1.jpg" >
        </div>
        <div class="slide">
          <h2>Amerikansk</h2>
          <img src="Bilder/img2.jpg" >
        </div>
        <div class="slide">
          <h2>Asiatisk</h2>
          <img src="Bilder/img3.jpg" >
        </div>
        <div class="slide">
          <h2>Arabisk</h2>
          <img src="Bilder/img4.jpg" >
        </div>
        <div class="slide">
            <h2>Modern</h2>
          <img src="Bilder/img5.jpg" >
        </div>
        <div class="slide">
          <h2>Europeisk</h2>
          <img src="Bilder/img6.jpg" >
        </div>
      </div>
      <script src="script.js"></script>
    </body>
    </html>

Viktige punkter i koden:

  • CSS-filen er koblet til `index.html` i `<head>`-seksjonen.
  • JavaScript-filen er lagt til rett før den avsluttende `<body>`-taggen.
  • Hvert bilde har en klasse «slide».
  • `<img src>` taggen henter bildene fra mappen «Bilder».

Stil den automatiske slideren med CSS

Nå kan vi style bildene ved å legge til følgende CSS-kode i `styles.css`:

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

Denne koden sørger for at:

  • Slideren har en bredde på 80%.
  • Kun det aktive bildet vises, mens de andre er skjult.

JavaScript for responsivitet

Legg til denne JavaScript-koden i `script.js` for å gjøre slideren dynamisk:

        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 koden gjør følgende:

  • Henter alle elementer med klassen «slide».
  • Initialiserer `currentSlide` til 0.
  • Setter `slideInterval` til 2000 (2 sekunder), noe som bestemmer hvor raskt bildene byttes.
  • Fjerner «active»-klassen fra det nåværende bildet.
  • Øker indeksen for det nåværende bildet.
  • Legger til «active»-klassen til det nye bildet.

Den automatiske slideren vil nå fungere som forventet.

#2. Automatisk slider med knapper

Vi kan nå forbedre slideren med navigasjonsknapper slik at brukere kan bla manuelt, i tillegg til den automatiske overgangen.

HTML-kode

Endre innholdet i `index.html`-filen med denne koden:

    <!DOCTYPE html>
    <html lang="no">
    <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>Bildeslider</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="Bilder/img1.jpg" style="width:100% ; height:50vh" >
            </div>
        
            <div class="mySlides">
                <img src="Bilder/img2.jpg" style="width:100% ; height:50vh">
            </div>
        
            <div class="mySlides">
                <img src="Bilder/img3.jpg" style="width:100% ; height:50vh">
            </div>
        
            <div class="mySlides">
                <img src="Bilder/img4.jpg" style="width:100% ; height:50vh">
            </div>
        
            <div class="mySlides">
                <img src="Bilder/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="Bilder/img1.jpg" style="width:100%" onclick="currentSlide(1)" >
            </div>
            <div class="column">
                <img class="demo cursor" src="Bilder/img2.jpg" style="width:100%" onclick="currentSlide(2)" >
            </div>
            <div class="column">
                <img class="demo cursor" src="Bilder/img3.jpg" style="width:100%" onclick="currentSlide(3)" >
            </div>
            <div class="column">
                <img class="demo cursor" src="Bilder/img4.jpg" style="width:100%" onclick="currentSlide(4)" >
            </div>
            <div class="column">
                <img class="demo cursor" src="Bilder/img5.jpg" style="width:100%" onclick="currentSlide(5)" >
            </div>
            
            </div>
        </div>
    
        <script src="script.js"></script>
    </body>
    </html>

Viktige elementer i HTML-koden:

  • Klassen «mySlides» inneholder de fem bildene.
  • «Forrige» og «Neste» knappene har `onClick` hendelser som lar brukerne bla gjennom bildene.
  • Miniatyrbildene under viser de tilgjengelige bildene.

CSS-kode

Legg til denne CSS-koden i `styles.css`:

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

Denne CSS-koden gjør følgende:

  • Skjuler alle bildene ved å sette `display` til `none` for klassen «mySlides».
  • Gjør miniatyrbildene litt gjennomsiktige med mindre musen er over dem, der de blir fullt synlige.

JavaScript-kode

Legg til denne JavaScript-koden i `script.js`:

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

Her er hva koden gjør:

  • `currentSlide`-funksjonen sørger for at kun det gjeldende bildet vises.
  • `plusSlides`-funksjonen endrer bildene etter en klikk på «forrige» eller «neste»-knappene.
  • Bildene vil automatisk bla etter hvert 3000. millisekund (3 sekunder) om brukeren ikke klikker på knappene.

Med denne koden vil slideren fungere som forventet.

Her kan du finne fullstendig kildekode.

Testing og feilsøking av bildeslideren

Feil er en del av utviklingsprosessen. Om koden din ikke fungerer som forventet, kan du prøve følgende feilsøkingstips:

  • Feilsøk hver fil for seg: HTML, CSS og JavaScript har forskjellige regler. Sjekk om koden din er gyldig ved å bruke verktøy som W3C Markup Validation Service (HTML), CSS Validator (CSS), og Chrome DevTools (JavaScript).
  • Utfør ulike tester: Utfør visuelle tester (korrekt visning), ytelsestester (responsivitet) og funksjonstester (navigerbarhet).
  • Test med ulike bildeformater og størrelser: En god slider skal takle variasjon i bildeformater og -størrelser.
  • Automatiser testing: Bruk verktøy som Selenium eller LoadRunner for å automatisere testprosessene.
  • Dokumenter testene dine: Dokumenter testprosessen for å gjøre koden lett å forstå og vedlikeholde.

Beste praksis for bildeslidere

  • Hold det enkelt: Ikke bruk for mange bilder. 4-7 bilder er et godt utgangspunkt.
  • Test slideren: Test funksjonaliteten grundig før publisering.
  • Lag responsive slidere: Sørg for at slideren fungerer godt på forskjellige skjermstørrelser.
  • Bruk bilder av høy kvalitet: Bruk bilder i god oppløsning. SVG-formatet er et godt valg da det ikke mister kvalitet ved endring i størrelse.
  • Tilpass bildestørrelser: Sørg for at alle bildene i en slider har lik størrelse, enten ved hjelp av CSS eller bildebehandlingsverktøy.

Konklusjon

Vi håper du nå er i stand til å lage en fullt funksjonell bildeslider for å vise viktig informasjon på nettstedet ditt uten bruk av UI-rammeverk. Samme tilnærming kan også brukes for videoslidere. Lykke til!