Kuinka rakentaa karuselli tyhjästä vanilja JS: ssä.

Kuva Xavi Cabrera on Unsplash

Uuden tekniikan julkaiseminen on uskomatonta. Nopeasti, että on helppo siirtyä uusimpaan ja parhaaseen kehykseen tai kirjastoon asettamatta aikaa ymmärtää perusteet todella.

Olen johtanut ja hallinnoin tällä hetkellä verkkokehitysryhmiä, ja pääpainopisteeni on ryhmäni henkilökohtainen kasvu. Yksi ensimmäisistä tehtävistä, jotka asetin aloitteleville kehittäjille, jotka haluavat kehittää perustietä JS, on rakentaa karuselli.

Karusellihaaste

Lyhyt kuvaus on selkeä.

Luo toimiva karuselli selaimessa luettavissa olevaan koodiin. Ei kirjastoja, ei kehyksiä, ei rakennustyökaluja. Vain HTML5, CSS3 ja JavaScript.
Bonuspisteet, jos se toimii kosketustapahtumien kanssa kosketusnäyttölaitteissa.

Rakastan tämän tehtävän asettamista, koska karusellin rakentaminen vaatii arkkitehtonista ajattelua, datan ja elementtien hallintaa, DOM-käsittelyä ja käyttäjän vuorovaikutuksen huomioon ottamista. On niin monia tapoja lähestyä ja oppia tästä tehtävästä, että sama kehittäjä, joka tekee saman lyhyen, muutaman kuukauden välillä, johtaisi täysin erilaisiin tuloksiin.

Nyt, puhutaan tarpeeksi, aloitetaan selvittää tämä.

Ennen koodin kirjoittamista meidän on päätettävä, kuinka haluamme HTML: n, CSS: n ja JS: n toimivan yhdessä.

Pitäisikö meidän siirtää kuvat taulukkona JS: ään, tulisiko semanttinen HTML rakentaa niin, että rakenne on olemassa ennen JS: n lataamista, tapahtuuko animaatio, jos on, ohjaako sitä JS tai CSS?

Tässä esimerkissä aiotaan käyttää jäsenneltyjä HTML-, CSS3-siirtymiä ja JS: n ohjaamaa interaktiivisuutta.

HTML: Rakenne

Aiomme rakentaa karusellirakenteen. Kun koodimme tätä, meidän on otettava huomioon, että yhdellä sivulla voi olla useampia kuin yksi karuselli, joten käytämme uudelleen käytettävyyden vuoksi luokan ominaisuutta tunnuksen kohdalla kohdistamiseen ja muotoiluun.

Tässä on perusrakenne:

  
    
    
    
    
    
      
    
    
  

Karusellikääreltä alkaen, käytämme tätä karusellin koon mitoittamiseen ja piilottamaan kaiken ylivuodon sisällön sen sisällä.

karuselli pitää kaikkia elementtejä kuten kuvia ja navigointipainikkeita.

carousel__photo -sovellusta käytetään -tageihimme, jotta muotoilu on helppoa. Olemme myös antaneet kuvan, jonka haluamme näyttää aluksi luokan.

karuselli__-painike, jossa liput --next ja --prev, jotta voimme antaa jokaiselle heille oman napsautustapahtuman. Seuraan BEM-menetelmää niille, jotka ovat kiinnostuneita luokkien nimeämiskäytännöistä.

HTML valmis. Seuraavaksi, CSS.

CSS: tyylit ja siirtymät

Olen suuri kannattaja kirjoittamalla CSS ensin pienemmille näytöille - AKA Mobile First) ja sitten mediakyselyjen avulla laajentamaan muotoilua sisällön sanelemana.

Tätä silmällä pitäen tämä CSS on yhden sarakkeen näkymä karusellista, ja lyhyyden vuoksi poistan myyjän etuliitteet (esim. Web-web-).

Tehdään tämä.

Sukellus .karusellikäärellä, ei mitään erityistä täällä, vain ylivuoto ja leveys. Ideana on, että leveyttä voidaan muuttaa sisällöllesi sopivaksi ja kaikki sen sisällä oleva mitoitetaan sopivaksi.

.karuselli-kääre {
  ylivuoto piilotettu;
  leveys: 90%;
}

Haluamme myös käyttää reunuslaatikkoa laatikon kokoominaisuuteen, jotta mahdollinen pehmuste ja reunus sisältyvät elementtien kokonaisleveyteen ja -korkeuteen.

.karuselli-kääre * {
  laatikon koko: reunuslaatikko;
}

Käytämme muunnosominaisuutta karusellin esineiden siirtämiseen, joten asettamalla muunnostyyli tyyli 3d-säilyttämiseksi varmistaa, että sisäkkäiset elementit esitetään oikein 3D-tilassa.

.karuselli {
  muunnostyyli: säilytä-3d;
}

Piilomme oletuksena kaikkia kohteita, kunnes skripti käynnistää karusellin. Helppoa sijoittamista varten elementit sijoitetaan ehdottomasti ja niiden reagoiva leveys on 100%. Sisältömme sanelee karusellin korkeuden, ja siirtymäominaisuus on taikuuksemme karusellin animoimiseksi.

.karuselli__photo {
  opasiteetti: 0;
  asema: ehdoton;
  top: 0;
  leveys: 100%;
  marginaali: auto;
  täyte: 1rem 4rem;
  z-indeksi: 100;
  siirtymä: muunnos, 5s, opasiteetti, 5s, z-indeksi, 5s;
}

Joskus skriptien lataaminen voi viedä vähän aikaa, joten näytetään ensin, tehdään siitä suhteellinen, jotta emosäiliö laajenee ja tuoda se eteen eteenpäin z-hakemistolla. Nämä tyylit pätevät myös aktiiviseen tuotteeseemme karusellin ohjauksen aikana.

.carousel__photo.initial,
.karuselli__foto.aktiivinen {
  opasiteetti: 1;
  asema: suhteellinen;
  z-indeksi: 900;
}

Navigoidessamme karuselleissa, haluamme, että JS asettaa dynaamisesti luokat esiasentamaan edeltävät ja seuraavat kohteet kääntämällä ne muunnosominaisuuden kanssa. Käytämme taas z-indeksiä laittaaksesi ne muiden esineiden päälle, mutta aktiivisen kohteen alapuolelle.

.carousel__photo.prev,
.karuselli__photo.seuraava {
  z-indeksi: 800;
}
.karuselli__photo.prev {
  muunnos: translateX (-100%); / * Siirrä 'edellinen' kohta vasemmalle * /
}
.karuselli__photo.seuraava {
  transformaatio: translateX (100%); / * Siirrä 'seuraava' kohde oikealle * /
}

Karusellin CSS on valmis, jäljellä on vain navigointipainikkeet, jotka sijaitsevat karusellin keskellä molemmilla puolilla ja nuolet sisällä. Lisää HTML-koodin lisäämisen sijaan lisäämme nuolet käyttämällä :: pseudo-elementin jälkeen.

.carousel__button - Taaksepäin,
.karuselli__painike - seuraava {
  asema: ehdoton;
  top: 50%;
  leveys: 3rem;
  korkeus: 3rem;
  taustaväri: #FFF;
  transformaatio: käännösY (-50%);
  rajasäde: 50%;
  kohdistin: osoitin;
  z-indeksi: 1001; / * Istu kaiken päälle * /
  reunus: 1px kiinteä musta;
}
.karuselli__painike - edellinen {
  vasen: 0;
}
.karuselli__painike - seuraava {
  oikea: 0;
}
.carousel__button - Taaksepäin :: jälkeen,
.karuselli__painike - seuraava :: jälkeen {
  sisältö: " ";
  asema: ehdoton;
  leveys: 10px;
  korkeus: 10px;
  yläosa: 50%;
  vasen: 54%;
  reuna-oikea: 2px kiinteä musta;
  reunan pohja: 2px kiinteä musta;
  transformaatio: kääntää (-50%, -50%) kiertää (135deg);
}
.karuselli__painike - seuraava :: jälkeen {
  vasen: 47%;
  transformaatio: kääntää (-50%, -50%) kiertää (-45 ° C);
}
Jos olet seurannut pitkin, karusellisi ei pitäisi näyttää liian erilaiselta tältä.

JavaScript: Saa toimimaan!

Kiitos, jos olet mennyt tähän mennessä niin hyvin, hyvin tehty. Todella. Kiitos paljon. Olet paras. ❤

Meillä on rakenne, meillä on se näyttää siltä, ​​kuinka haluamme siirtymien alkaessa, nyt meidän on tehtävä se vain toimimaan.

Aika selvittää tämä ennen kuin aloitamme koodauksen.

  1. Meidän on aloitettava karuselli etsimällä alkuperäinen alkio ja soveltamalla .prev- ja .next-luokka vierekkäisiin kohteisiin.
  2. Sitten haluamme lisätä napsautustapahtumia navigointipainikkeihimme.
  3. Napsautustapahtumat eivät ole mitään ilman toimintoa, joten kirjoitamme kaksi toimintoa kunkin suunnan käsittelemiseksi.
  4. Kun tiedämme, missä suunnassa käyttäjä yrittää navigoida, kirjoitetaan toinen toiminto karusellin siirtämiseksi siihen suuntaan.
  5. Jotta ihmiset eivät napsauta painikkeita ylikuormittamalla, poistamme käytöstä interaktiivisuuden karusellin animoinnin aikana ja otamme sen käyttöön uudelleen, kun se on valmis.
  6. Lopuksi haluamme käsitellä kaikkea tätä toiminnossa, joka siirtää kohteita karusellissa selvittämällä päivitettävät kohteet ja päivittämällä ne uusilla luokilla CSS3-siirtymien käynnistämiseksi.

Ristiriitojen välttämiseksi ja jotta se olisi mahdollisimman siirrettävissä, on meidän etujen mukaista suojata koodimme globaalilta laajuudelta, joten kääritään se IIFE: hen.

! (Toiminto (d) {
  // Kaikki koodi menee tänne. Olemme nimittäneet asiakirjan uudelleen d: ksi.
}(asiakirja));

Aluksi ilmoitamme muuttujamme. Asetamme muuttujan, joka kohdistuu perusluokkaan .carousel__photo, ja tallenna sitten kaikki tämän luokan objektit kappaleisiin, kun ne on tallennettu, voimme laskea ne ja tallentaa kyseisen määrän totalItems-kohtaan, sitten asetamme dioksi nykyisen liu'uta (indeksissä 0), ja lopuksi osoitamme liikkumisen totta, jota käytämme painikkeiden napsautuksien käyttöönottoon ja poistamiseen käytöstä.

var itemClassName = "karuselli__photo";
    items = d.getElementsByClassName (itemClassName),
    totalItems = esineet.pituus,
    dia = 0,
    liikkuva = totta;

Nämä kaksi seuraavaa toimintoa asettavat alkuperäiset luokat ja lisäävät tapahtumakuuntelijamme navigointipainikkeisiin.

// Aseta luokat
funktio setInitialClasses () {
  // Kohdistaa edellisen, nykyisen ja seuraavan kohteen
  // Tämä edellyttää, että on ainakin kolme kohdetta.
  kohteet [totalItems - 1] .classList.add ("edellinen");
  kohdetta [0] .classList.add ( "aktiivinen");
  eriä [1] .classList.add ( "Next");
}
// Aseta tapahtuman kuuntelijat
toiminto setEventListeners () {
  var seuraava = d.getElementsByClassName ('karuselli__-painike - seuraava') [0],
      edellinen = d.getElementsByClassName ('karuselli__-painike - edellinen') [0];
  next.addEventListener ('napsauta', siirrä seuraava);
  prev.addEventListener ('napsauta', siirräPrev);
}

Sitoudumme moveNext- ja movePrev -sovelluksiin napsautustapahtumaan, joten luomme paremmin nämä toiminnot seuraavaksi. Nämä toiminnot tarkistavat riippumatta siitä, mikä nykyinen dianumero on, ja joko kasvattaa, pienentää tai asettaa sen ensimmäiseen tai viimeiseen kohtaan.

// Seuraava navigointikäsittelijä
toiminto moveNext () {
  // Tarkista, liikkuu
  jos (! liikkuu) {
    // Jos se on viimeinen dia, palauta arvoon 0, muuten +1
    if (liu'uta === (totalItems - 1)) {
      liuku = 0;
    } muuta {
      dia ++;
    }
    // Siirrä karuselli päivitettyyn diaan
    moveCarouselTo (dia);
  }
}
// Edellinen navigoinnin käsittelijä
toiminto movePrev () {
  // Tarkista, liikkuu
  jos (! liikkuu) {
    // Jos se on ensimmäinen dia, aseta viimeiseksi diaksi, muuten -1
    if (liu'uta === 0) {
      dia = (totalItems - 1);
    } muuta {
      slide--;
    }
          
    // Siirrä karuselli päivitettyyn diaan
    moveCarouselTo (dia);
  }
}

Mahtava. Joten pystymme suorittamaan koodin, kirjoitetaan pieni logiikka käsittelemään liikkuvaa muuttujaa, joka asettaa sen totta, kun se laukaistaan, ja sitten takaisin väärään, kun siirtymämme on valmis.

toiminto DisableInteraction () {
  // Aseta 'liikkuva' todeksi samaan aikaan kuin siirtymämme.
  // (0,5 s = 500 ms)
  
  liikkuva = totta;
  // setTimeout suorittaa toimintansa kerran annetun ajan kuluttua
  setTimeout (toiminto () {
    liikkuu = väärä
  }, 500);
}

Päätoiminto, joka käsittelee koko karuselli, istuu moveCarouselTo (dia) -kohdassa, joka ottaa dion numeron argumentiksi. Tämä on suurin toiminto, joten olen kommentoinut koodia.

toiminto moveCarouselTo (dia) {
  // Tarkista, liikkuukö karuselli, jos ei, salli vuorovaikutus
  jos (! liikkuu) {
    // poista väliaikainen vuorovaikutteisuus käytöstä
    disableInteraction ();
    // Päivitä "vanhat" vierekkäiset dioja "uusilla"
    var newPrevable = dia - 1,
        newNext = dia + 1,
        oldPrevable = dia - 2,
        oldNext = dia + 2;
    // Testaa, onko karusellissa enemmän kuin kolme tuotetta
    if ((totalItems - 1)> 3) {
      // Tarkistaa ja päivittää, jos uudet diot ovat rajojen ulkopuolella
      if (newPrevable <= 0) {
        oldPrevable = (totalItems - 1);
      } else if (newNext> = (totalItems - 1)) {
        oldNext = 0;
      }
      // Tarkistaa ja päivittää, jos dia on alussa / lopussa
      if (liu'uta === 0) {
        newPrevable = (totalItems - 1);
        oldPrevable = (totalItems - 2);
        oldNext = (liuku + 1);
      } else if (liu'uta === (totalItems -1)) {
        newPrevable = (dia - 1);
        newNext = 0;
        oldNext = 1;
      }
      // Nyt olemme selvittäneet missä olemme ja mihin olemme menossa,
      // lisäämällä / poistamalla luokat käynnistämme siirrot.
      // Palauta vanhat seuraavat / edelliset elementit oletusluokkiin
      items [oldPrevable] .className = itemClassName;
      esineet [oldNext] .className = itemClassName;
      // Lisää uusia luokkia
      esineet [uusiPrevable] .className = itemClassName + "edellinen";
      esineet [dia] .className = itemClassName + "aktiivinen";
      items [newNext] .className = itemClassName + "seuraava";
    }
  }
}

Olemme melkein siellä! Meillä on yksi viimeinen toiminto, joka meidän on tehtävä, ja tämä on se, johon me soitamme, jotta kaikki toimisi.

toiminto initCarousel () {
  setInitialClasses ();
  setEventListeners ();
  // Aseta siirtyminen väärään, jotta karuselli muuttuu vuorovaikutteiseksi
  liikkuva = väärä;
}

Soitetaan lopuksi initCarousel () lisäämällä se alareunaan:

// tee sateesta
initCarousel ();

Jos olet seurannut, sinun pitäisi etsiä - ja olla vuorovaikutuksessa - jotain tällaista:

Toivottavasti olet nauttinut debyyttiartikkelistani. Jaa jos se on hyödyllistä, jaa se, ja jos haluat pysyä ajan tasalla, voit seurata minua Instagramissa.