Hva er den beste måten å lage en glidebryter. Alternativ css3-glidebryter for animasjonseffekter. jQuery "Easy Slides" lysbildefremvisningsplugin v1.1

Alt fungerer fint og enkelt!
MEN!
Prøver å legge til 7 lysbilder. Viser kun 4 lysbilder uansett.

Hmmm!, Pavel, du har rett, du kan ikke legge til mer enn 4 lysbilder. Jeg prøvde å fikse denne jamben, det fungerte ikke

Alexander svarer:
01/01/2016 kl 15:52

Det er enkelt å legge til flere skyveknapper. Nå skal jeg forklare for de som ikke vet og ikke forstår CSS. Les nøye!
La oss se på denne koden:

Skyvelinjetekst # 1

Skyvetekst #2

Skyvetekst # 3

Skyvetekst #4

Det er bare 4 skyveknapper i den, men de er alle nummererte. Legg til den femte glidebryteren slik

Glidebrytertekst #5

Nå, for at den skal vises hos oss, må den være skrevet i CSS-stiler.
Vi finner disse linjene i koden:

/ * css3 forsinkelser * / .slides ul li: nth-child (2), .slides ul li: nth-child (2) div (-webkit-animation-delay: 6.0s; -moz-animation-delay: 6.0s ;) .slides ul li: nth-child (3), .slides ul li: nth-child (3) div (-webkit-animation-delay: 12.0s; -moz-animation-delay: 12.0s;) .slides ul li: nth-child (4), .slides ul li: nth-child (4) div (-webkit-animation-delay: 18.0s; -moz-animation-delay: 18.0s;)

Vær oppmerksom på sekvensnumrene og tidspunktet for animasjonen.
Hver skyveknapp har sin egen tid og dette intervallet tilsvarer 6,0s. Dette betyr at for at det femte lysbildet skal vises, må du legge til 6.0s innen det fjerde lysbildet vises, og sørg for å sette inn et serienummer
Her er koden for den femte glidebryteren:

Lysbilder ul li: nth-child (5), .slides ul li: nth-child (5) div (-webkit-animation-delay: 24.0s; -moz-animation-delay: 24.0s;)

Du trenger bare ikke å huske å legge til sekvensnummer og tidspunkt for det nye lysbildet. Du kan endre tiden som du vil. For eksempel vil det første lysbildet vises i 6.0s, og det andre vi vil at det ikke skal vises i 6.0s, men om 10.0s, så vil det andre ha en utseendetid på 16.0s

Det er alt. Jeg sjekket det selv og alt fungerer.

Men i IE vil det virkelig ikke fungere. Denne nettleseren forstår ikke alle CSS3-stiler. Jeg kan si en ting, du kan ikke bry deg om denne nettleseren og sette denne glideren, men for de 10% av folk som bruker IE vil ikke se skyveknappen. Hvis det er knyttet til stilene på nettstedet ditt, så er det absolutt ikke veldig bra hvis personen ikke ser det. Kort sagt, se selv.

Noen ganger må jeg løse problemer knyttet til front-end, til tross for at jeg misliker det 🙂

Faktisk kan du vurdere holdningen min til alt som er forbundet med "vakker" ved utformingen av denne siden, som ble utviklet av meg alene 🙂

Men relativt nylig ble jeg møtt med behovet for å implementere en skyveknapp i JavaScript, og dette måtte gjøres uten noen ferdige biblioteker og til og med uten alles favoritt jQuery.

Dette behovet var forårsaket av det faktum at resultatet skulle ha vært et JS-skript som skulle kobles til nettstedet gjennom en tredjepartstjeneste. Følgelig forsvant ferdige karuseller i JavaScript umiddelbart, siden for å integrere dem, var det nødvendig å legge til en bibliotekforbindelse til HTML-koden til nettstedet via script-taggen og kopiere selve filene til serveren eller trekke dem via cdn, men dette ville igjen kreve redigering av ressurskoden.

Hvordan lage en JavaScript-glidebryter: Komme i gang

I dag tror jeg at alle som befant seg i en lignende situasjon begynte med å se etter den tilgjengelige utviklingen, tk. når oppgaven med å lage en JS-karusell er en del av arbeidet, skal det alltid gjøres så raskt som mulig. Og under slike forhold vil selvfølgelig ingen tillate deg å sitte og finne opp dine egne sykler.

Kundene bryr seg alltid ikke om hvordan koden er skrevet, hvilken arkitektur den har, det viktigste er å se resultatet!

Til slutt, som du forstår, før jeg skrev en glidebryter i JavaScript uten jQuery, bestemte jeg meg for å finne en ferdig og endre den for å passe mine behov. Hvorfor uten jQuery? Ja, fordi på målressursen, der jeg planla å koble glideren min gjennom tjenesten, ble jQuery-kallet i koden lokalisert senere enn skriptet som ble koblet til av tjenesten. Derfor ble jQuery-konstruksjoner i koden min rett og slett ikke oppfattet.

Jeg tok denne JavaScript-bildeskyvekontrollen som grunnlag - https://codepen.io/gabrieleromanato/pen/pIfoD.

Jeg bestemte meg for å stoppe med det, fordi JS-koden hans ble skrevet ved å bruke prinsippene til OOP, og klassene i den er basert på prototyper, og ikke på trivielle funksjoner.

For å være ærlig, forstår jeg dypt ikke og gjenkjenner ikke den nåværende hypen rundt JavaScript med bruk av OOP, rammer og andre arkitektoniske deler på et språk som opprinnelig ble tenkt som et enkelt språk for dynamisk skripting. I tillegg til JS selv, misliker jeg ærlig talt den syntaktiske vinaigretten, som gjør at de samme konstruksjonene kan skrives på flere måter.

Men, dessverre, i moderne verden Få mennesker deler mine posisjoner, tk. språket utvikler seg i et vanvittig tempo og gjør til og med forsøk på å erobre sinnet til backend-utviklere som bruker Node.js som et alternativ til Java, PHP, C #, Ruby og andre monstre.

Som et resultat, for ikke å være banal fra jobb, må du stille med JavaScript. Og i min valgte implementering av skyveknappen på ren JavaScript Jeg møtte det, som du forstår, jeg forakter i dette språket... Derfor valgte jeg det slik at det i det minste var en grunn til å jobbe og forstå JavaScript OOP og prototypeklasser - ellers ville jeg aldri frivillig rørt dem i mitt liv 🙂

Basert på koden jeg fant, trengte jeg å utvikle en skyveknapp i ren JS i et popup-vindu (denne tingen kalles også en popup, pop-up osv.), som ville ha knapper for å bytte lysbilder og klikkbare indikatorer for gjeldende lysbilde. Det var også nødvendig å lage en knapp for å lukke dette vinduet.

Her er hva jeg endte opp med.

Lage et glidebryter JS-bibliotek

Først bestemte jeg meg for å implementere alt smart og lage en JavaScript-glidebryter for nettstedet i form av et bibliotek som kan kobles til nettstedet med et enkelt skript, der skyvekomponentene, delt inn i underkataloger, kalles. Jeg bestemte meg for å ringe det popupSlider.js til ære for dets opprinnelige formål.

Koden kan bli funnet på GitHub på denne adressen - https://github.com/Pashaster12/popupSlider.js

Bibliotekets struktur kom ut som følger:

Mappe lysbilder designet for lysbildebilder. V kontroller plasserte bilder av JS-karusellkontroller (knapper for å lukke skyveknappen og bytte lysbilde). Og i eiendeler- statiske JS-glideelementer: HTML-markering og en fil med CSS-stiler.

Vel, popupSlider.js-filen er hjertet av selve biblioteket, der JavaScript-karusellhandlingene er skrevet og lenker til resten av filene er etablert. Det er han som vi skal koble til på siden, og han vil allerede ringe resten.

Jeg bestemte meg for å starte med HTML-markeringen av bildekarusellen vår JS, som i mitt tilfelle ser slik ut:

For å designe glidebryteren i JavaScript som en popup, brukte jeg følgende stiler:

#slider (margin: auto; width: 600px! viktig; overflow: hidden;) # slider-wrapper (bredde: 9999px; høyde: 343px; posisjon: relativ; overgang: venstre 400ms lineær;) .slide (float: venstre; width) : 600px; posisjon: relativ; overløp: skjult;) .caption (bredde: 600px; høyde: 110px; line-height: 1,5; font-size: 15px; font-weight: 300; text-align: center; color: # 000; display: table;) .caption-container (display: table-cell; vertical-align: middle; padding: 0 20px;) # slider-nav (posisjon: absolutt; bunn: -36px; tekstjustering: center; venstre: 50%; transform: translateX (-50%);) # slider-nav a (bredde: 8px; høyde: 8px; tekstdekorasjon: ingen; farge: # 000; display: inline-block; border-radius: 50 %; margin: 0 5px; bakgrunnsfarge: #fafafa;) # slider-nav a.current (bakgrunnsfarge: # 337ab7;) .horizontal-controls (posisjon: absolutt; display: inline-block; width: 12px ; høyde: 20px; topp: 50%; margin-top: -10px;) #prev (bakgrunn: url (../ forts. rols / arrow_left_inactive.png); venstre: -40px; ) #prev: hover (bakgrunn: url (../ kontroller / arrow_left_active.png);) #next (bakgrunn: url (../ controls / arrow_right_inactive.png); høyre: -40px;) #neste: hover (bakgrunn) : url (../ controls / arrow_right_active.png);) # cq-popup (bredde: 600px; z-indeks: 23; venstre: calc (50 %); topp: calc (50 %); posisjon: fast! viktig ; background-repeat: no-repeat; bakgrunnsposisjon: høyre; bakgrunnsfarge: #fff; font-family: "Roboto", "Segoe UI", "Helvetica", "Georgia", "Calibri", "Verdana" ; transform: translate (-50%, -50%) skala (1);) # cq-popup .header (display: inline-block; font-size: 17px; font-weight: 500;) # cq-popup> div (bredde: 500px; skriftstørrelse: 22px; linjehøyde: 36px;) # cq-popup-btclose (tekstdekorasjon: ingen; posisjon: absolutt; høyre: -40px; topp: 0; bakgrunn: url (. ./controls/btn_delete_inactive.png); høyde: 16px; bredde: 16px;) # cq-popup-btclose: hover (bakgrunn: url (../ controls / btn_delete_active.png);) # cq-popup-bg (posisjon : fast; topp: 0; bredde: 100 % ; høyde: 100 %; bakgrunn: rgba (51,51,51,0,8); z-indeks: 22; )

Som et resultat av å bruke disse JS-stilene, ser karusellen slik ut:

Jeg gjengav både HTML-markering og CSS-stiler i separate filer popupSlider.html og popupSlider.css, som er plassert i aktivakatalogen til JavaScript-skyvebiblioteket. Jeg gjorde dette med vilje slik at brukere, når de brukte denne koden, enkelt kunne korrigere markeringen og designet, uten å krype inn i JS-koden, hvor det gjengitte måtte skrives direkte.

I tillegg liker mange fortsatt å minifisere JS for å øke hastigheten på lasting av nettsider. Så tilpass denne løsningen når spesifiserte forhold det ville vært veldig vanskelig.

Til slutt bestemte jeg meg for å bare koble til klare filer i hovedbiblioteksfilen popupSlider.js, som for min problemformulering tok følgende form:

Funksjon Slider (element) (this.loadStatic (); this.el = document.querySelector (element); this.init ();) Slider.prototype = (init: function () (this.links = this.el.querySelectorAll ("# slider-nav a"); this.wrapper = this.el.querySelector ("# slider-wrapper"); this.nextBtn = this.el.querySelector ("# neste"); this.prevBtn = dette. el.querySelector ("# forrige"); this.navigate ();), navigate: function () (var self = this; for (var i = 0; i)< this.links.length; ++i) { var link = this.links[i]; link.addEventListener("click", function (e) { self.slide(this); }); } self.prevBtn.style.display = "none"; self.nextBtn.addEventListener("click", function (e) { var currentSlideNumber = document.querySelector("#slider-nav a.current").getAttribute("data-slide"); var nextSlide = document.querySelector(""); nextSlide.click(); }, false); self.prevBtn.addEventListener("click", function (e) { var currentSlideNumber = document.querySelector("#slider-nav a.current").getAttribute("data-slide"); var prevSlide = document.querySelector(""); prevSlide.click(); }, false); self.close(); }, slide: function (element) { this.setCurrentLink(element); var index = parseInt(element.getAttribute("data-slide"), 10) + 1; var currentSlide = this.el.querySelector(".slide:nth-child(" + index + ")"); this.wrapper.style.left = "-" + currentSlide.offsetLeft + "px"; if (index < this.links.length) this.nextBtn.style.display = "block"; else if (index == this.links.length) this.nextBtn.style.display = "none"; if (index >1) this.prevBtn.style.display = "blokk"; else if (indeks == 1) this.prevBtn.style.display = "ingen"; ), setCurrentLink: function (link) (var parent = link.parentNode; var a = parent.querySelectorAll ("a"); link.className = "current"; this.currentElement = link; for (var j = 0; j< a.length; ++j) { var cur = a[j]; if (cur !== link) { cur.className = ""; } } }, loadStatic: function () { var self = this; var link = document.createElement("link"); link.rel = "stylesheet"; link.href = "assets/popupSlider.css"; document.head.appendChild(link); var sliderHTML = ""; var xhr = new XMLHttpRequest(); xhr.open("GET", "assets/popupSlider.html", false); xhr.send(); if (xhr.status != 200) { alert("Can not load the popupSlider.html. Got the error " + xhr.status + ": " + xhr.statusText); } else { sliderHTML = xhr.responseText; } var div = document.createElement("div"); div.innerHTML = sliderHTML; document.body.appendChild(div); }, close: function () { document.getElementById("cq-popup-btclose").onclick = function () { document.getElementById("cq-popup-bg").remove(); document.getElementById("cq-popup").remove(); } } };

Noen kommentarer om den gitte koden. Innholdet i popupSlider.js-filen er en enkelt JavaScript Slider-klasse som, i likhet med PHP, inneholder konstruktøren og metodene til klassen. Bare i JS kreves definisjonen av en konstruktør, i motsetning til PHP.

Konstruktøren er definert ved å bruke følgende konstruksjon:

Funksjonsglidebryter (element) (// konstruktørkode)

Inne i konstruktøren må handlingene som skal utføres når du oppretter et objekt av klassen skrives.

Selve klassemetodene vil være inne i prototypen og vil være tilgjengelige for alle forekomster av denne JavaScript-klassen. JS-prototypen i mitt tilfelle er beskrevet av følgende konstruksjon:

Slider.prototype = (// metoder)

De vil bli kalt opp utenfor klasseorganet som følger:

Var skyveknapp = ny skyveknapp (); slider.class_method ();

Og inne i selve klassekoden er følgende metode tilgjengelig:

This.class_method ();

Det viktigste er ikke å glemme at verdien av dette i JavaScript avhenger av konteksten til samtalen, derfor er det en slik konstruksjon i kroppen til noen metoder der det var nødvendig å kalle metoder og egenskaper til klassen:

Var selv = dette; self.class_method (); // for å referere til en metode som er ett nivå høyere enn koden til den beskrevne metoden

Det ser ut til at jeg fortalte om alle nyansene ved å skrive kode. Nå noen få ord om metodene til JavaScript-klassen vår, som inneholder beskrivelser av JS-handlingene til bildekarusellen.

loadStatic ()

Den aller første metoden som kalles når klassen instansieres i konstruktøren. Ansvarlig for å legge til glidebryter HTML-markering og en fil med stiler til HTML-koden til sidesiden.

Først opprettes en ny lenkekode i minnet ved hjelp av JavaScript-funksjonen document.createElement () og tilordnes verdiene til alle nødvendige attributter, inkludert banen til CSS-filen med glidebryteren JS-stiler. Til slutt legges den til HTML-siden ved å bruke JavaScript appendChild ()-metoden på slutten av head-delen, der den skal styles.

Deretter gjør vi det samme for filen med HTML-oppmerking skyveknappen vår i ren JavaScript. Men det er en liten nyanse her: akkurat som det kan en HTML-fil inne i den samme ikke kobles til, slik vi gjorde med en CSS-fil. Det finnes spesielle biblioteker for dette, for eksempel, for å inkludere HTML i HTML, er lib fra w3.org flott - https://www.w3schools.com/howto/howto_html_include.asp

Men da må det enten inkluderes i skyvebiblioteket selv, eller be brukere om å installere det på egen hånd. Men alt dette er ikke optimalt, fordi krever mange kroppsbevegelser og senker nettsidens lastehastighet på grunn av ekstra skript.

Til slutt bestemte jeg meg for å få inn innholdet i HTML-filen JavaScript-kode og last den inn i en ny div element opprettet i minnet som jeg gjorde tidligere for CSS-tilkoblinger fil i JavaScript. Det genererte elementet er koblet helt til enden av seksjonen body HTML nettstedsidekode.

Hvis du vil sette inn en div med en skyvemarkering ikke bare på slutten av brødteksten, men i en bestemt beholder, kan du i stedet for følgende kode:

Var div = document.createElement ("div"); div.innerHTML = skyveknappHTML; document.body.appendChild (div);

Skriv følgende, og spesifiser ønsket målbeholderidentifikator (i mitt tilfelle vil HTML JS til glidebryteren være plassert i elementet med popupSlider-IDen):

Var target = document.querySelector ("# popupSlider"); target.innerHTML = sliderHTML;

Metoden som kalles i konstruktøren etter loadStatic (), og er nødvendig for å initialisere klasseegenskapene som tilsvarer hoved-HTML-elementene, som vi vil referere til i neste kode.

Til slutt kalles navigeringsmetoden ()-metoden.

naviger ()
Denne metoden spesifiserer handlingene som skjer når du klikker på skyvebryterknappene og navigasjonselementene som ligger under selve glidebryteren, i form av sirkler.

For enkelhets skyld legger jeg JavaScript-koden for å endre lysbilder inn i en egen slide()-metode, og i denne henger jeg den kun på klikkhendelsen for hver runde-knapp i loopen.

Når du klikker på "forrige lysbilde" / " neste lysbilde»Jeg, som du kan se, bestemte meg for å bare etterligne å klikke på den tilsvarende sirkelen, og bestemme den nødvendige i forhold til den nåværende, som har CSS klasse strøm.

lysbilde (element)

Metoden "ansvarlig for magien" til selve JavaScript-karusellen, som inneholder koden som bytter lysbilder. Helt i begynnelsen kalles setCurrentLink ()-metoden, som vi skal snakke om litt senere.

Som inndataparameter et JS-skyveknappobjekt i form av en sirkel sendes til det.

Selve lysbildebyttet fungerer slik:

1. Alle lysbildene er designet i form av blokker av samme størrelse, som går etter hverandre. Skyvevinduet er bare synlig del et element som inneholder alle lysbildene.
2. Vi bestemmer forskyvningen til venstre kant av gjeldende lysbilde fra venstre kant av overordnet element ved å bruke egenskapen offsetLeft.
3. Og vi flytter det overordnede elementet med denne verdien slik at det nødvendige elementet vises i skyvevinduet.

På slutten av metoden beskrives oppførselen for knappene "forrige lysbilde" / "neste lysbilde", utformet som henholdsvis venstre/høyre piler. Hvis gjeldende lysbilde er det første av hele listen, er knappen for å gå til forrige lysbilde skjult. Hvis sistnevnte, fjern deretter knappen for å gå til neste lysbilde.

setCurrentLink (lenke)

Denne metoden i klassen vår JavaScript-glidebryter er ansvarlig for å markere navigasjonsrundeknappen som tilsvarer det gjeldende elementet. De. hvis vi har valgt det andre lysbildet, vil den andre knappen bli uthevet.

Objektet til knappen, som skal velges som gjeldende, sendes til funksjonen som en inngangsparameter.

Logikken for å fremheve gjeldende element er enkel:

1. Vi får objektet til det overordnede elementet, som i vårt tilfelle er beholderen med identifikatoren slider-nav.
2. Vi får alle navigasjonselementene som en rekke lenker.
3. Vi velger elementet mottatt ved inngangen ved å legge til en klasse til det strøm.
4. I loopen itererer vi over alle navigasjonselementene og sletter klasseverdien for alle unntatt den gjeldende. Dette er nødvendig for å velge bort elementet som var gjeldende før denne samtalen funksjoner.

Den aller siste metoden i klassen, der handlingen bestemmes når du klikker på lukkeknappen til glidebryteren i form av et kryss. Her er faktisk koden den mest forståelige av alt som finnes i glidebryteren JS-klassen.

Når du klikker på lukkeknappen, som kan nås med identifikatoren, fjernes skyveelementet og elementet som setter den semi-transparente bakgrunnen fra siden. De er på sin side også avledet fra unike identifikatorer.

Selve metoden kalles inne i den tidligere beskrevne navigeringen (), som inneholder alle skriptene for handlinger som finner sted i vår JavaScript-glidebryter.

Forresten, hvis du vil lukke glidebryteren når du klikker utenfor den, er det bare å legge til følgende kode i denne metoden:

Document.getElementById ("cq-popup-bg"). Onclick = function () (document.getElementById ("cq-popup-bg"). Fjern (); document.getElementById ("cq-popup"). Fjern () ;

JavaScript-lysbildefremvisning basert på det utviklede biblioteket

Noen ganger, i praksis, vil du kanskje lage en JS-rullekarusell, ofte referert til som en lysbildefremvisning. I mitt tilfelle var dette ikke nødvendig, men jeg bestemte meg likevel for å lage en basert på den resulterende bibliotekkoden for saken når den kunne komme til nytte.

Faktisk skiller JavaScript-implementeringen av lysbildefremvisningen seg bare litt fra den vanlige glidebryteren. Den eneste forskjellen er at i en lysbildefremvisning bytter lysbildene automatisk med et spesifisert tidsintervall, og i tilfelle en vanlig JS-karusell endres de manuelt ved hjelp av navigasjonselementer.

SlideShow: function (timeout) (var sliderCount = this.links.length; var self = this; this.slideCycle = setInterval (function () (var currentSlideNumber = document.querySelector ("# slider-nav a.current"). GetAttribute ("data-slide"); var slideId = parseInt (currentSlideNumber, 10) + 1; self.slide (document.querySelector (""));), timeout);)

Hva som skjer her – jeg synes det er klart. For å skape denne metoden Jeg kopierte koden fra klikkhendelsen på de manuelle skyvebryterknappene og plasserte den i et JavaScript-kall til funksjonen setInterval () som utfører den angitte handlingen etter en spesifisert tidsperiode.

Handlingsskriptet sendes som det første argumentet som en anonym funksjon, og tidsintervallet som det andre, som jeg bestemte meg for å lage som en variabel, hvis verdi sendes når du kaller lysbildeshow ().

Den eneste modifikasjonen av koden i setInterval () som var nødvendig var å bestemme antall lysbilder og sammenligne indeksen til det gjeldende lysbildet med det for automatisk sløyfe.

Vel, for at denne koden skal fungere, må selve metoden kalles. Jeg bestemte meg for å gjøre alt i samme navigering (), som bare er en samling av alle slags skript. Jeg plasserte samtalen helt på slutten, og ga som argument verdien av tidsintervallet for automatisk endring lysbilder i vår JS-lysbildefremvisning (jeg valgte 2000 millisekunder eller 2 sekunder, du kan endre dette tallet etter behov):

Self.slideShow (2000);

Etter det, sjekk JavaScript-glidebryteren, ikke glem å rense nettleseren også.

I teorien skal alt fungere. Hvis ikke, studer feilene i nettleserkonsollen og del dem i kommentarene.

Som et resultat fikk vi en JS-lysbildefremvisning, der lysbildene bytter automatisk og i en sirkel, dvs. når det siste lysbildet er nådd, går showet over og starter på nytt fra det aller første elementet.

Når jeg jobbet med forskjellige JS-biblioteker med karusellbilder og anmeldelser, la jeg merke til at utviklere aktivt bruker denne praksisen, men med noen tillegg. I alle løsningene jeg har sett blir den automatiske lysbildefremvisningen avbrutt dersom brukeren har gjort en manuell veksling. Derfor bestemte jeg meg for å gjøre det samme i biblioteket mitt.

For å avbryte den automatiske lysbildefremvisningen til JavaScript-karusellen, bestemte jeg meg for å bruke standard JS-funksjonen clearInterval (), som jeg som argument sender identifikatoren til tidsintervallet som returneres av funksjonen setInterval () når den er satt.

Som et resultat fikk jeg følgende kode, som jeg bestemte meg for ikke å tegne i en egen metode:

ClearInterval (self.slideCycle);

Og jeg plasserte den på de stedene der handlinger er beskrevet når man klikker på ulike navigasjonselementer, dvs. i følgende:

Link.addEventListener ("klikk", funksjon (e) (...)); self.prevBtn.addEventListener ("klikk", funksjon (e) (...)); self.nextBtn.addEventListener ("klikk", funksjon (e) (...));

Det er bedre å ringe clearInterval () nærmere selve klikkhendelsen, det viktigste er at før den, og ikke etter den.

Integrering av JavaScript-glidebryteren på nettstedet

Så vår rene JS-glidebryter er klar. Nå gjenstår det bare å koble den til siden.

For å gjøre dette må du følge de sekvensielle trinnene nedenfor, som er standardtrinn ved integrering av tredjeparts JavaScript-biblioteker generelt.

Trinn 1... Vi kopierer bibliotekfilene til nettstedet vårt i en egen katalog.
Steg 2... Legg til følgende kode på HTML-sidene som må vise glidebryteren, og plasser den foran den avsluttende body-taggen:

Trinn 3... Plasser følgende kode for å kalle karusellen JS i en eksisterende JavaScript-fil som er koblet til siden etter å ha koblet til selve glidebryteren:

Var aSlider = ny Slider ("# slider");

Som du kan se, skaper denne koden faktisk et objekt av Slider-klassen, som finnes i popupSlider.js. Det er grunnen til at den bare skal kalles etter å ha koblet selve klassefilen til siden.

Legger til nye lysbilder i JavaScript-karusellen

Alt er veldig enkelt her. Siden lysbildene er hentet fra en egen bibliotekkatalog lysbilder, så når du legger til nye bilder, trenger du bare å kaste inn det nødvendige filer ved å sette dem tidligere i samme størrelse som de andre.

Og så i koden til assets / popupSlider.html-filen legg til en ny blokk i beholderen med id skyve-innpakning:

I utgangspunktet kan du bare kopiere en lignende eksisterende og endre banen til bildefilen og signaturteksten i den (hvis du trenger det i det hele tatt).

Du må også legge til ny gjenstand navigasjon i form av en sirkel, tk. for øyeblikket er det automatiske tillegget ennå ikke implementert. For å gjøre dette, må du legge til følgende kode til beholderen med id slider-nav ved å skrive det helt til slutt:

Attributtverdi data-lysbilde bør være større enn det største av de andre elementene. Det er nok bare å øke den maksimale strømmen med én.

Pakker karusell JS i ett enkelt skript

Alt, glidebryteren er på JavaScript klar og koblet til. Jeg personlig anbefaler å bruke dette alternativet i praksis, hvis det i det hele tatt kommer til nytte :)

For å fremskynde arbeidet kan du forresten komprimere det ytterligere statiske komponenter: CSS, HTML og JavaScript-filer... Jeg gjorde ikke dette og tilbyr deg minifisert kode, fordi det er mange frontend-byggesystemer nå: Gulp, Grunt, Webpack og andre. Og hver av dem har sine egne komprimerings- og filtilkoblingsalgoritmer.

I tillegg kan forminskede resultater fungere forskjellig på forskjellige operativsystemer. Generelt er det mange grunner.

Og selve kildekodene kom ut, tror jeg, ikke så tunge at de trenger denne prosedyren. Men hvis du trenger dem, konfigurer minifiseringen selv, ta hensyn til operativsystemet og samleren.

Som jeg skrev helt i begynnelsen, for å løse den opprinnelige oppgaven, trengte jeg å få en enkelt JS-fil for riktig bruk av glidebryteren min gjennom en tredjepartstjeneste på nettstedet. Av denne grunn brukte jeg faktisk ikke ferdige tredjepartsbiblioteker.

Da vil en variant av et enkelt JavaScript-karusellskript komme godt med. alt innhold vil være inneholdt direkte i det, inkludert HTML / CSS-kode, som i tilfelle av et bibliotek er lagret i separate filer.

Manuset i mitt tilfelle består av to deler. Den første delen inneholdt innholdet i popupSlider.js-filen, som jeg ikke vil vise for andre gang. Sett den inn selv, fjern beskrivelsen av loadStatic ()-metoden og dens kall fra klassekoden, siden vi trenger dem ikke.

Den andre delen av det enkle JavaScript-skyveskriptet for nettstedet er behandleren for DOMContentLoaded-hendelsen, som oppstår når sideinnholdet lastes inn.

Der vil vi legge til karusellen JS-koden til HTML / CSS-siden og lage et objekt av Slider-klassen, som tilsvarer å aktivere selve glideren.

Koden ser slik ut skjematisk:

/ * innholdet i popupSlider.js uten å beskrive loadStatic ()-metoden og kalle den * / document.addEventListener ("DOMContentLoaded", funksjon () (var str = "\\ /* html-kode* / "; var div = document.createElement (" div "); div.innerHTML = str; document.body.appendChild (div); var aSlider = new Slider (" # slider ");

Siden i mitt tilfelle var muligheten for å laste opp filer til serveren helt stengt, måtte jeg laste opp bildefilene til JavaScript-karusellkontrollene til skyen og i stedet for banene til dem i HTML- og CSS-koden, skrive koblingene som ble generert når sparing.

Hvis du ikke har slike problemer, kan du ikke endre noe, men ikke glem å kopiere lysbildene og kontrollkatalogene til biblioteket til serveren og spesifisere de rette veiene til dem.

Selvskrevet JS slider - utviklingsutsikter

Ærlig talt, så har jeg ikke tenkt å engasjere meg i målrettet støtte og utvikling av løsningen jeg har laget 🙂 For øyeblikket er det en vogn og en liten vogn med slike glidere, som i motsetning til min har sin egen historie, er grundig testet og støttet av et omfattende fellesskap av brukere og utviklere.

Men for meg å starte hele denne veien fra bunnen av alene og lage en annen sykkel er på en eller annen måte ikke interessant, og jeg har virkelig ikke tid til det. Men på den annen side er denne JavaScript-glidebryteren en utmerket mulighet til å øve på utvikling ved å omstrukturere koden og implementere nye interessante funksjoner, som kanskje ikke er tilgjengelige for øyeblikket.

Så hvis du, som meg, trenger en kodebase å eksperimentere med og du har i det minste litt ekstra fritid- kopier deg selv koden til JavaScript-glidebryteren jeg beskrev, eller bli med bidragsyterne på GitHub. Depotet er åpent, og jeg ga en lenke til det i begynnelsen av artikkelen.

Hvis du vil pumpe frontend-ferdighetene dine på skapelsen min, kan jeg til og med gi deg en liten liste over redigeringer og forbedringer som koden trenger og som kanskje vil være av interesse for deg når det gjelder implementeringen:

1. lag en ekstern konfigurasjon slik at du enkelt kan tilpasse glidebryteren;
2. gjør det mulig å bygge inn glidebryteren inne på siden (nå er den kun utformet som en popup);
3. asynkron lasting av HTML-kode (nå gjort synkront, som er merket som utdatert av mange nettlesere);
4. ordne biblioteket i form av en pakke, NPM, Bower eller annen pakke slik at det kan installeres og drives med avhengigheter ved å bruke pakkebehandlere;
5. gjør oppsettet responsivt for bruk av JS-karusellen på ulike enheter;
6. gjør lysbildebytte ved sveipe-hendelse for mobilbrukere.

Listen over redigeringer jeg har gitt er selvfølgelig ikke endelig og kan suppleres. Skriv om dine forslag, tanker og ønsker i kommentarfeltet under artikkelen og del med vennene dine gjennom sosiale nettverk for å få dem med i utviklingen også.

Jeg ber deg om ikke å dømme koden min strengt, fordi jeg som sagt ikke anser meg selv som en frontend-spesialist, og det er jeg ikke. Jeg er også åpen for alle dine kommentarer om kodestilen og jeg håper at jeg kan lære noe av deg, og deg - av meg, dvs. oppfylle hovedformålet med å utvikle og støtte OpenSource-produkter.

Bli med i prosjektmiljøene, abonner på oppdateringer og du kan til og med hjelpe meg økonomisk ved å bruke skjemaet rett under selve artikkelen, hvis jeg kunne hjelpe deg med noe eller du bare liker det jeg gjør 🙂

Det er alt! Helt fint! 🙂

Til å begynne med ble denne artikkelen skrevet med mål om å fortelle deg hvordan du oppretter en skyveknapp for bilderulling for nettsider. Denne artikkelen er på ingen måte pedagogisk, den tjener bare som et eksempel på hvordan du kan implementere vår gjenstand for vurdering. Du kan bruke koden gitt i denne artikkelen som en slags mal for slike utviklinger, jeg håper at jeg vil være i stand til å formidle hele essensen av det jeg har skrevet til leseren i tilstrekkelig detalj og på en tilgjengelig måte.

Og nå til poenget, for ikke så lenge siden trengte jeg å sette en glidebryter på ett nettsted, men etter å ha søkt på Internett etter ferdige skript, fant jeg ikke noe verdt. noen fungerte ikke som jeg trengte, mens andre ikke startet i det hele tatt uten feil i konsollen. Bruk jQuery - plugins det virket for meg for uinteressant for skyveknappen, tk. Selv om jeg skal løse problemet med dette, vil jeg ikke ha en forståelse for driften av denne mekanismen, og å bruke plugin-en for én glidebryters skyld er ikke særlig optimal. Jeg ville heller ikke helt forstå skjeve manus, så jeg bestemte meg for å skrive mitt eget manus til glidebryteren, som jeg selv skal markere etter behov.

Til å begynne med må vi bestemme logikken til selve glidebryteren, og deretter fortsette til implementeringen, på dette stadiet er det veldig viktig å ha en klar forståelse av driften av denne mekanismen, for uten den kan vi ikke skrive kode som fungerer akkurat som vi ønsker.

Vårt hovedmål vil være viewport, det vil si en blokk der vi vil se hvordan bildene våre snurrer, i den vil vi ha slide wrapper, vil dette være blokken vår som inneholder alle bildene, stilt opp på én linje, og som vil endre sin posisjon i selve viewport.


Videre på sidene innvendig viewport, vertikalt i midten, vil tilbake- og forover-knappene være plassert, ved å klikke på som vil vi også endre posisjonen til vår slide wrapper relativt viewport, og forårsaker dermed effekten av å bla gjennom bildene. Og til slutt vil det siste objektet være navigasjonsknappene våre nederst. viewport.


Når du klikker på dem, vil vi ganske enkelt se på serienummeret til denne knappen og flytte til lysbildet vi trenger, igjen ved å skifte slide wrapper(offset vil bli gjort gjennom endringen transformere css-egenskaper, hvis verdi vil bli konstant beregnet).

Jeg tror logikken i hele denne saken burde være klar etter det jeg har uttalt ovenfor, men hvis det fortsatt er misforståelser et sted, så vil alt bli oppklart i koden nedenfor, du trenger bare litt tålmodighet.

La oss nå skrive! Først av alt vil vi åpne vår indeksfil og skriv markeringen vi trenger der:

Som du kan se, ingenting komplisert blokk-for-glidebryter fungerer som akkurat den samme blokken som skyveknappen vår skal plasseres i, inne i seg selv viewport der vår slide wrapper, aka nestet liste, her li er lysbilder og img- bilder inni dem. Vær oppmerksom på at alle bilder må ha samme størrelse eller i det minste proporsjoner, ellers vil glidebryteren se skjev ut, tk. dimensjonene avhenger direkte av sideforholdet til bildet.

Nå må vi stilisere hele greia, vanligvis blir stilene egentlig ikke kommentert, men jeg bestemte meg for å trekke oppmerksomhet til dette, slik at det ikke skulle oppstå noen misforståelser i fremtiden.

body (margin: 0; polstring: 0;) # blokk-for-glidebryter (bredde: 800px; margin: 0 auto; margin-top: 100px;) #viewport (bredde: 100%; display: tabell; posisjon: relativ; overflyt: skjult; -webkit-user-select: ingen; -moz-user-select: ingen; -ms-user-select: ingen; -o-user-select: ingen; bruker-velg: ingen;) #slidewrapper ( posisjon: relativ; bredde: beregnet (100 % * 4); topp: 0; venstre: 0; margin: 0; polstring: 0; -webkit-overgang: 1s; -o-overgang: 1s; overgang: 1s; -webkit -transition-timing-function: ease-in-out; -o-transition-timing-function: ease-in-out; transition-timing-function: ease-in-out;) #slidewrapper ul, #slidewrapper li (margin) : 0; polstring: 0;) #slidewrapper li (bredde: beregnet (100% / 4); listestil: ingen; display: inline; flyte: venstre;) .slide-img (bredde: 100%;)

La oss begynne med blokk-for-glidebryter, dette er igjen blokken vår på siden, som vi vil sette til side for glidebryteren, høyden vil avhenge av bredden og proporsjonene til bildet vårt, siden viewport tar opp hele bredden blokk-for-glidebryter så meg selv lysbilde har samme bredde, og følgelig endrer bildet inni høyden avhengig av bredden (proporsjonene er bevart). Jeg plasserte dette elementet horisontalt i midten på siden min, polstret 100px fra toppen, noe som gjorde posisjonen mer praktisk for et eksempel.

Element viewport, som allerede nevnt, opptar hele bredden av vår blokk-for-glidebryter, den har eiendommen overløp: skjult, vil det tillate oss å skjule bildefeeden vår, som vil sprette ut av visningsporten.


Følgende css-egenskap - brukervelg: ingen, lar deg bli kvitt det blå utvalget individuelle elementer glidebryter med flere knappeklikk.

Går videre til slide wrapper Hvorfor stilling: pårørende, men ikke absolutt? Alt er veldig enkelt, tk. hvis vi velger det andre alternativet, så med eiendommen viewport overflow: skjult absolutt ingenting vil virke for oss, tk. meg selv viewport vil ikke tilpasse seg høyden slide wrapper, på grunn av hva vil ha høyde: 0... Hvorfor betyr bredde så mye, og hvorfor setter vi den i det hele tatt? Faktum er at lysbildene våre vil ha en bredde lik 100 % av visningsområdet, og for å ordne dem i en linje, trenger vi et sted hvor de skal stå, dermed bredden slide wrapper bør like 100 % visningsportbredde multiplisert med antall lysbilder (i mitt tilfelle 4). Angående overgang og overgang-timing-funksjon så her 1s betyr at en endring i stilling slide wrapper vil skje innen 1 sekund og vi vil observere det, og lette inn-ut- den typen animasjon der den først går sakte, akselererer til midten og deretter bremser ned igjen, her kan du allerede stille inn verdiene etter eget skjønn.

Den neste blokken med egenskapssett slide wrapper og barna har null polstring, kommentarer er unødvendige her.

Deretter vil vi style lysbildene våre, deres bredde skal være lik bredden. viewport, men siden de er inne slide wrapper, hvis bredde er lik bredden på visningsporten multiplisert med antall lysbilder, for deretter å få bredden viewport igjen, vi trenger 100 % av bredden slide wrapper del på antall lysbilder (i mitt tilfelle, igjen, med 4). Deretter gjør vi dem til inline-elementer ved hjelp av display: inline og sett flyten til venstre ved å legge til egenskapen flyte: venstre... Om listestil: ingen Jeg kan si at jeg bruker den til å fjerne standardmarkøren fra li, er i de fleste tilfeller en slags standard.

Med slide-img alt er enkelt, bildet vil ta opp hele bredden lysbilde, lysbilde tilpasser seg høyden, slide wrapper tilpasser seg høyden lysbilde, og høyden viewport vil igjen ta verdien av høyden slide wrapper, dermed vil høyden på glidebryteren vår avhenge av sideforholdet til bildet og størrelsen på blokken som er gitt for skyveknappen, som jeg allerede skrev om ovenfor.

Jeg tror det var her vi fant ut stilene, la oss lage en enkel lysbildefremvisning uten knapper foreløpig, og etter å ha forsikret oss om at den fungerer riktig, legg til og style dem.

La oss åpne vår js filen, som vil inneholde skyvekoden, ikke glem å inkludere jQuery siden vi vil skrive med dette rammeverket. Forresten, i skrivende stund bruker jeg versjonen jQuery 3.1.0... Filen med selve skriptet må inkluderes helt på slutten av taggen kropp siden vi vil jobbe med DOM-elementene som må initialiseres først.

For nå må vi deklarere et par variabler, en vil lagre lysbildenummeret som vi ser på et bestemt tidspunkt i viewport, jeg kalte henne skyv nå, og den andre vil lagre antallet av de samme lysbildene, dette er slideCount.

var slideNow = 1; var slideCount = $ ("# slidewrapper"). barn (). length);

Variabel skyv nå det er nødvendig å sette startverdien 1, fordi når siden laster inn, vil vi, basert på markeringen vår, se det første lysbildet viewport.

V slideCount vi vil sette antall barn slide wrapper, alt er logisk her.
Deretter må du lage en funksjon som vil være ansvarlig for å bytte lysbilder fra høyre til venstre, vi vil erklære det:

funksjon neste lysbilde () ()

Vi vil kalle det i hovedblokken til koden vår, som vi kommer til, men foreløpig vil vi fortelle funksjonen vår hva den trenger å gjøre:

funksjon nesteSlide () (if (slideNow == slideCount || slideNow<= 0 || slideNow >slideCount) ($ ("# slidewrapper"). css ("transform", "translate (0, 0)"); slideNow = 1;) else (translateWidth = - $ ("# viewport"). width () * ( slideNow); $ ("# slidewrapper"). css (("transform": "translate (" + translateWidth + "px, 0)", "-webkit-transform": "translate (" + translateWidth + "px, 0 ) "," -ms-transform ":" translate ("+ translateWidth +" px, 0) ",)); slideNow ++;))

Først sjekker vi om vi nå er på siste lysbilde av feeden vår? For å gjøre dette tar vi antallet på alle lysbildene våre som bruker $ ("# slidewrapper"). barn (). lengde og sjekk det med nummeret på lysbildet vårt, hvis de viser seg å være like, betyr dette at vi må begynne å vise båndet igjen, fra 1 lysbilde, noe som betyr at vi endrer css transform eiendom på slide wrapper på oversett (0, 0) dermed flytte den til startposisjon slik at det første lysbildet er i vårt synsfelt, la oss ikke glemme det –Webkit og –ms for tilstrekkelig visning på tvers av nettlesere (se. css egenskaper referanse). Etter det, la oss ikke glemme å oppdatere verdien av variabelen. skyv nå, og informerer henne om at lysbilde nummer 1 er i synsfeltet hennes: slideNow = 1;

Den samme betingelsen inkluderer å sjekke at nummeret på lysbildet vi ser er innenfor grensene for antall lysbilder, hvis dette på en eller annen måte ikke er oppfylt, vil vi gå tilbake til det første lysbildet.

Hvis den første betingelsen ikke er oppfylt, betyr dette at vi for øyeblikket ikke er på det siste lysbildet, eller på et ikke-eksisterende, noe som betyr at vi må bytte til det neste, vi vil gjøre det ved å skifte slide wrapper til venstre med en verdi lik bredden viewport, vil forskyvningen igjen skje gjennom den kjente egenskapen oversette hvis verdi vil være lik "translate (" + translateWidth + "px, 0)", hvor oversettBredde- avstanden som vår slide wrapper... Forresten, la oss erklære denne variabelen i begynnelsen av koden vår:

var translateWidth = 0;

Etter å ha flyttet til neste lysbilde, fortell lysbildet vårt Nå som vi ser neste lysbilde: slideNow ++;

For øyeblikket kan noen lesere ha et spørsmål: hvorfor erstattet vi ikke $ ("# viewport"). width () til en eller annen variabel, for eksempel slideWidthå alltid ha bredden på lysbildet vårt for hånden? Svaret er veldig enkelt, hvis nettstedet vårt er responsivt, så er blokken som er tildelt glidebryteren også adaptiv, fra dette kan det forstås at når du endrer størrelsen på vindusbredden uten å laste inn siden på nytt (for eksempel å snu telefonen sidelengs), bredden viewport vil endres, og følgelig vil også bredden på ett lysbilde endres. I dette tilfellet vår slide wrapper vil bli forskjøvet med verdien av bredden som opprinnelig var, noe som betyr at bildene vil vises i deler eller ikke vises i det hele tatt i viewport... Ved å skrive til vår funksjon $ ("# viewport"). width () i stedet for slideWidth vi får den til å beregne bredden hver gang vi bytter lysbilde viewport, og gir dermed en rulling til ønsket lysbilde når skjermbredden endres brått.

Imidlertid skrev vi funksjonen, nå må vi kalle den etter et visst tidsintervall, vi kan også lagre intervallet i en variabel, slik at hvis vi vil endre det, endrer du bare én verdi i koden:

var slideInterval = 2000;

Tid i js er spesifisert i millisekunder.

La oss nå skrive følgende konstruksjon:

$ (dokument) .ready (funksjon () (setInterval (nesteSlide, slideInterval);));

Alt er ingen steder enklere, vi er gjennom konstruksjonen $ (dokument) .ready (funksjon () ()) vi sier at følgende handlinger må utføres etter fullastet dokument. Da kaller vi bare funksjonen neste lysbilde med et intervall lik slideInterval, ved hjelp av den innebygde funksjonen settintervall.

Etter alle handlingene vi utførte ovenfor, skal glidebryteren vår snurre fint, men hvis noe gikk galt med deg, kan problemet være enten i versjonen jQuery, enten i feil tilkobling noen filer. Det er heller ikke nødvendig å utelukke at du kan ha gjort en feil et sted i koden, så jeg kan bare råde deg til å dobbeltsjekke alt.


I mellomtiden, fortsett, legg til glidebryteren vår en slik funksjon som å slutte å rulle ved å holde musepekeren, for dette må vi skrive i hovedblokken med kode (inne i $ (dokument) .ready (funksjon () ())) slik en ting:

$ ("# viewport"). hover (funksjon () (clearInterval (switchInterval);), function () (switchInterval = setInterval (nesteSlide, slideInterval);));

For å begynne å analysere denne koden, må vi vite hva som er switchInterval... For det første er dette en variabel som lagrer et periodisk kall til nextSlide-funksjonen, for å si det enkelt, vi bruker denne kodelinjen: setInterval (nesteSlide, slideInterval);, ble til dette: switchInterval = setInterval (nesteSlide, slideInterval);... Etter disse manipulasjonene tok vår hovedkodeblokk følgende form:

$ (dokument) .ready (funksjon () (var switchInterval = setInterval (nesteSlide, slideInterval); $ ("# viewport"). hover (function () (clearInterval (switchInterval);), function () (switchInterval = setInterval ( nextSlide, slideInterval);));));

Her bruker jeg event sveve, som betyr "på sveve", lar denne hendelsen meg spore øyeblikket når jeg holder musepekeren over et objekt, i dette tilfellet, på viewport.

Etter å ha svevet, fjerner jeg avstanden, som jeg vil indikere i parentes (dette er vår switchInterval), så, atskilt med komma, skriver jeg hva jeg skal gjøre når jeg flytter markøren tilbake, i denne blokken tildeler jeg igjen til vår switchInterval periodisk funksjonsanrop neste lysbilde.

Nå, hvis vi sjekker, vil vi se hvordan glidebryteren vår reagerer på musebevegelse, og stopper lysbildebyttet.

Nå er det på tide å legge til knapper til glidebryteren vår, la oss starte med frem og tilbake-knappene.

Først av alt, la oss merke dem opp:

Først gitt markup kan være uforståelig, jeg vil si med en gang at jeg pakket disse to knappene inn i én div med klasse forrige-neste-btns bare for enkelhets skyld, du trenger ikke å gjøre dette, resultatet vil ikke endre seg, nå vil vi legge til stiler til dem og alt vil bli klart:

# prev-btn, # next-btn (posisjon: absolutt; bredde: 50px; høyde: 50px; bakgrunnsfarge: #fff; border-radius: 50%; top: calc (50% - 25px);) # prev- btn: hover, # next-btn: hover (markør: peker;) # prev-btn (venstre: 20px;) # neste-btn (høyre: 20px;)

Først plasserer vi knappene våre via posisjon: absolutt, og dermed vil vi fritt kontrollere deres posisjon innenfor vår viewport, så vil vi indikere størrelsene på disse knappene og bruke grense-radius runde hjørnene slik at disse knappene blir til sirkler. Fargen deres vil være hvit, det vil si #fff, og deres innrykk fra øverste kant viewport vil være lik halve høyden av denne viewport minus halve høyden på selve knappen (i mitt tilfelle 25px) slik at vi kan plassere dem vertikalt i midten. Deretter vil vi indikere at når vi holder musepekeren over dem, vil markøren endres til pekeren og til slutt fortelle knappene våre individuelt om å rykke inn 20px fra kantene, slik at vi kan se dem slik vi ønsker det.

Igjen, du kan style sideelementene slik du vil, jeg gir bare et eksempel på stilene jeg bestemte meg for å bruke.

Etter styling skal glidebryteren vår se omtrent slik ut:


Gå deretter tilbake til vår js filen hvor vi beskriver hvordan knappene våre fungerer. Vel, la oss legge til en annen funksjon, den vil vise oss forrige lysbilde:

funksjon prevSlide () (if (slideNow == 1 || slideNow<= 0 || slideNow >slideCount) (translateWidth = - $ ("# viewport"). width () * (slideCount - 1); $ ("# slidewrapper"). css (("transform": "translate (" + translateWidth + "px, 0 ) "," -webkit-transform ":" translate ("+ translateWidth +" px, 0) "," -ms-transform ":" translate ("+ translateWidth +" px, 0) ",)); slideNow = slideCount;) else (translateWidth = - $ ("# viewport"). width () * (slideNow - 2); $ ("# slidewrapper"). css (("transform": "translate (" + translateWidth + "px) , 0) "," -webkit-transform ":" translate ("+ translateWidth +" px, 0) "," -ms-transform ":" translate ("+ translateWidth +" px, 0) ",)); slideNow--;))

Det kalles prevSlide, vil den bare kalles når du klikker på forrige-btn... Først sjekker vi om vi er på 1. lysbilde eller ikke, her sjekker vi også om vår skyv nå utenfor grensene for det virkelige området til lysbildene våre, og hvis noen av forholdene fungerer, vil vi flytte til siste lysbilde ved å skifte slide wrapper til den verdien vi trenger. Vi vil beregne denne verdien med formelen: (bredden på ett lysbilde) * (antall lysbilder - 1), vi tar alt dette med et minustegn, siden vi flytter den til venstre, viser det seg at viewport vil nå vise oss det siste lysbildet. På slutten av denne blokken må vi også fortelle variabelen skyv nå at det siste lysbildet nå er i vårt synsfelt.

Hvis vi ikke er på det første lysbildet, må vi flytte 1 bakover, for dette endrer vi eiendommen igjen transform for slidewrapper... Formelen er som følger: (bredde på ett lysbilde) * (nummer på gjeldende lysbilde - 2), igjen tar vi alt dette med et minustegn. Men hvorfor er -2, og ikke -1, trenger vi å flytte bare ett lysbilde tilbake? Faktum er at hvis vi for eksempel er på det andre lysbildet, så er variabelen x egenskaper transform: oversett (x, 0) våre slide wrapper er allerede lik bredden på ett lysbilde, hvis vi forteller ham at vi må trekke 1 fra nummeret på det gjeldende lysbildet, vil vi igjen få enheten som det allerede er forskjøvet med slide wrapper, så det vil være nødvendig å forskyve akkurat disse breddene med 0 viewport, som betyr på slideNow - 2.

Nå trenger vi bare å legge til disse linjene i hovedblokken med kode:

$ ("# neste-btn"). klikk (funksjon () (nesteSlide ();)); $ ("# prev-btn"). klikk (funksjon () (prevSlide ();));

Her sporer vi bare om det ble gjort et klikk på knappene våre, og i dette tilfellet kaller vi funksjonene vi trenger, alt er enkelt og logisk.

La oss nå legge til lysbilde-navigasjonsknappene, tilbake til markeringen:

Som du kan se, inni viewport en nestet liste dukket opp, gi den en identifikator nav-btns, inni det li- navigasjonsknappene våre, vil vi tildele en klasse til dem lysbilde-nav-btn, men vi kan avslutte med markeringen, la oss gå ned til stilene:

# nav-btns (posisjon: absolutt; bredde: 100%; bunn: 20px; polstring: 0; margin: 0; tekstjustering: center;) .slide-nav-btn (posisjon: relativ; display: inline-block; listestil: ingen; bredde: 20px; høyde: 20px; bakgrunnsfarge: #fff; kantradius: 50%; margin: 3px;) .slide-nav-btn: hover (markør: peker;)

Blok nav-btns, der knappene våre er plassert, gir vi eiendommen posisjon: absolutt, slik at den ikke strekker seg viewport i høyden, fordi på slide wrapper eiendom stilling: pårørende, setter vi bredden til 100 % slik at vha tekstjustering: senter midtre knapper horisontalt relativt viewport, og deretter bruke eiendommen bunn vi gjør det klart for blokken vår at den skal være i en avstand på 20px fra underkanten.

Vi gjør det samme med knappene som med lysbildene, men nå setter vi dem display: inline-blokk siden på display: inline de reagerer ikke på bredde og høyde siden er i en absolutt plassert blokk. Vi vil gjøre dem hvite og ved hjelp av de som allerede er kjent for oss grense-radius la oss gi dem en sirkelform. Når du holder musepekeren over dem, vil vi endre utseendet til markøren vår for den vanlige visningen.

La oss nå gå ned til jQuery - deler:
Først, la oss erklære navBtnId-variabelen, som vil lagre indeksen til knappen vi klikket på:

var navBtnId = 0;
$ (". slide-nav-btn"). klikk (funksjon () (navBtnId = $ (dette) .index (); if (navBtnId + 1! = slideNow) (translateWidth = - $ ("# viewport"). width () * (navBtnId); $ ("# slidewrapper"). css (("transform": "translate (" + translateWidth + "px, 0)", "-webkit-transform": "translate (" + translateWidth + "px, 0)", "-ms-transform": "translate (" + translateWidth + "px, 0)",)); slideNow = navBtnId + 1;)));

Her er vi når du klikker på vår lysbilde-nav-btn vi kaller funksjonen, som først og fremst tilordner variabelen navBtnId indeksen til den klikkede knappen, det vil si ordensnummeret, siden tellingen starter fra null, så hvis vi klikker på den andre knappen, så i navBtnId verdien skrives 1. Deretter gjør vi en sjekk, hvor vi legger til en til serienummeret til knappen for å få et slikt tall som om nedtellingen ikke var fra 0, men fra 1, sammenligner vi dette tallet med antallet det gjeldende lysbildet, hvis de faller sammen, vil vi ikke gjøre noe, fordi ønsket lysbilde allerede er i viewport.

Hvis lysbildet vi trenger er ute av syne viewport, så beregner vi avstanden vi må forskyve slide wrapper til venstre, og endre deretter verdien css transformeringsegenskaper på translate(samme avstand i piksler, 0). Vi har allerede gjort dette mer enn én gang, så det bør ikke være noen spørsmål. På slutten lagrer vi verdien av gjeldende lysbilde til en variabel igjen. skyv nå, kan denne verdien beregnes ved å legge til en til indeksen til den klikkede knappen.

Det er alt, faktisk, hvis noe ikke er klart, så legger jeg igjen en lenke til jsfiddle, der all koden skrevet i materialet vil bli gitt.

Takk for oppmerksomheten!

Tagger:

• jquery-glidebryteren
• css
• css3 animasjon
• html

Legg til merkelapper

I kommentarfeltet til innlegget spurte de nylig om det er noen nettjenesterå lage dem. I utgangspunktet, hvis prosjektet ditt kjører på en av populært CMS(WordPress, Drupal), så bør det være tilsvarende plugins. Men hva skal jeg gjøre når nettstedet er skrevet i HTML eller det ikke er egnede moduler? I dag vil jeg fortelle deg om noen alternativer for å løse dette problemet.

Generelt er metodene for å lage glidebrytere forskjellige. Jeg husker da jeg pleide å jobbe med TYPO3, var det en modul som automatisk konverterer bilder til flash for visning på siden. Det er også spesielle skrivebordsprogrammer som lar deg lage lignende flash-stasjoner eller generere den nødvendige HTML + CSS-koden. I dag implementeres glidebrytere for det meste ved hjelp av Javascript og relaterte biblioteker som jQuery. Dessuten er det mange forskjellige skript. Jeg vil vurdere et par av dem.

Er en flott tjeneste for å lage online skyveknapp. Du trenger ikke fordype deg i noen skript, nesten alle innstillinger er tilgjengelige for interaktiv redigering: dimensjoner, effekter, navigasjon, etc. Du laster bare opp bildene dine, velger alternativene du vil ha og laster ned klar kode glidebryteren. Alt dette er gratis. Den endelige HTML-koden inneholder en lenke til denne tjenesten, men teoretisk kan den fjernes, det er ingen ekstra vannmerker i bildene. Respekt til utviklere!

ComSider

ComSider er en annen gratis online skyvegenerator for nettstedet ditt. Operasjonsprinsippet er likt, det består av 3 trinn: laste opp et bilde, velge en skyvemal og sette den opp, integrere koden med nettstedet ditt. Skyvemaler lar deg lage elementer av forskjellige design. Samtidig har tjenesten virkelig mange effektinnstillinger og andre muligheter for å få ønsket resultat... Siden sier at du kan bygge inn koden uten å laste ned filer, eller laste dem ned og integrere glidebryteren selv.

Cincopa

Cincopa er en ganske fin HTML-skyvetjeneste, men dessverre ikke helt gratis. Dette er ett av mange lignende prosjekter hvor det er spesielle tariffplaner. For gratisversjonen legges det som regel til forskjellige begrensninger på antall opplastede bilder, trafikk og (verst av alt) et vannmerke er plassert. Samtidig er alt selvfølgelig mesterlig implementert - mange temaer, innstillinger, plugins for populær CMS, teknisk støtte. Her må du se på tariffene, i noen tjenester kan de være ganske rimelige.

Tjenesten er en av de få hvor gratis tariff ingen vannmerker på bilder. Bare antallet mulige effekter er begrenset, men dette er ikke kritisk. Mye tilpasning, det er en dedikert plugin for WordPress. Alt i alt en god løsning.

HTML5Maker

HTML5Maker er et annet eksempel betalt tjeneste som fungerer med abonnement. V Gratis versjon du må tåle vannmerket, men Starter-nybegynnerplanen lar deg bli kvitt det. Samtidig har den en relativt rimelig pris ($ 5 / måned) og lar deg lage opptil 3 skyveknapper med alle effektene og mange maler.

Glatt

Den neste typen nettsteder med skyveknapper er prosjekter som inneholder ferdige skript, for eksempel Slippry. Det er ingen praktiske skjemaer for å laste opp bilder og spesifisere innstillinger, men alt er gratis. Du laster opp HTML-skyvekoden til hostingen din og integrerer den manuelt med nettstedet. På utviklersidene er det som regel dokumentasjon på bruk av scriptet, forklaringer på koden og eksempler på hvordan det fungerer.

Gli

Generelt er glidere forskjellige - Glide er et godt eksempel på dette. Skriptet lar deg lage en vakker skyveknapp for bakgrunnen til nettstedet. Enkel, rask, responsiv.

TosRus

TosRus er en annen interessant glidebryter som skiller seg litt fra klassisk implementering og ser mer ut som et galleri (kommer fortsatt godt med). Den vises normalt både på en vanlig datamaskin og på en smarttelefon. Når du klikker på et bilde, åpnes det i et fullt vindu, hvor det også vil være en glidebryter. Støtter innsetting, men bare bilder, men også HTML-innhold med video.

Skriptet skalerer bilder perfekt, slik at det er så enkelt som mulig. På siden finner du en prøvekode og beskrivelse. Glideren har muligheten til å navigere gjennom pilene eller "markert element" helt nederst i bildet.

Visuelt ser glidebryteren for nettstedet veldig stilig ut. Det er navigasjonselementer, tekstblokk. Generell bakgrunn for elementet blir et uskarpt bilde fra selve skyveknappen, noe som skaper en veldig interessant effekt.

- responsiv skyveknapp i jQuery, egnet for alle enheter. Den kan vises i full bredde på skjermen eller i en separat blokk. Beskrivelsen er ganske "primitiv", men du kan forstå den. Det er ikke så mange innstillinger som i noen av de andre alternativene.

Denne løsningen ser mer ut som et galleri, men jeg personlig likte den. Brukervennlighet, enkelt oppsett og gratis er hovedfordelene med DesoSlide. Det kan være nyttig for nettstedsutviklere.

Utbyggerne posisjonerer prosjektet som gratis galleri i jQuery, selv om den visuelt ligner en vanlig glidebryter. Løsningen er kompatibel med alle større nettlesere, har mange ulike effekterå endre bilder. Jeg likte demodelen, der du kan bruke visse innstillinger i sanntid for å se hvordan glidebryteren fungerer for nettstedet.

- Enkelt, funksjonelt, tilpassbart jQuery-glideskript i HTML5 og CSS3. Løsningen er kompatibel med alle nettlesere og støtter responsiv design. Utviklere vil elske det.

Løsningen vil komme godt med hvis du trenger å lage en glidebryter av typen karusell, når flere bilder vises og de automatisk ruller til venstre/høyre (for eksempel for en linje med partneres logoer eller visning av verk). Jeg har nylig sett på hvordan du implementerer denne oppgaven i WordPress, for vanlige nettsteder kan du prøve jsSimpleSlider-skriptet.

Tjenesten lager en USB-flash-stasjon fra bildene du lastet opp, som vises på nettstedet som en glidebryter. Det er enkelt å jobbe med dette verktøyet, selv om det ikke ser ut som en klassisk skyveknapp (det er i hvert fall ikke nok kontroller). Alt du kan spørre i den er Eksterne linker og overgangseffekter. Jeg tror det er usannsynlig at du vil bruke denne tjenesten, jeg nevner den bare som et av alternativene for å implementere oppgaven.

WOWSlider

Som jeg sa i begynnelsen, er det programmer for å lage skyveknapper som er installert på en datamaskin. WOWSlider er et godt eksempel på slik programvare. Det er bare mange forskjellige alternativer, innstillinger, temaer osv. Samtidig trenger du ingen kunnskap om HTML, hele skyveoppsettet er raskt og enkelt. Du kan laste ned programmet gratis, men uten å kjøpe en lisens vil logoen vises på glidebryteren.

CU3OX

CU3OX-programmet likte de uvanlige 3D-effektene for å endre bilder. Den brukes til å lage Flash-gallerier og skyveknapper. Fungerer på Win og Mac. Det er mange forskjellige innstillinger, alternativer for å endre bilder, lokalisering til forskjellige språk, etc. Til personlig bruk kan velge gratis versjon selv om den, dessverre, inneholder et vannmerke.

Hvis disse tjenestene, programmene og skyveskriptene ikke er nok for deg, anbefaler jeg deg å lese - det er omtrent 100 ulike alternativer deres gjennomføring. Alt avhenger i prinsippet av kravene til funksjonalitet og kunnskapen din. Spesielle tjenester glidebryterne nevnt i begynnelsen fungerer ganske bra og er gratis. Hvis du er kjent med webutvikling, bør du kunne forstå jQuery-skriptene i denne artikkelen. For de som er fremmed for utvikling passer betalte løsninger. Noen av dem er tilgjengelige online med abonnement, andre er skrivebordsprogrammer. Sistnevnte er dyrere, men det er ingen begrensninger på mengden skapte elementer eller tidsbegrensninger.

Forresten, hvis du kjenner noen interessante tjenester / skript for å lage skyveknapper for nettsteder, skriv navnene og lenkene til dem i kommentarene.

Flere ganger ble jeg bedt om å fortelle deg hvordan du lager en skyveknapp i JS, men jeg fortalte ikke alt. hovedårsaken- fordi jeg ikke visste hvordan.

På et tidspunkt skjønte jeg at det noen ganger er lettere å skrive en glidebryter enn å lete etter en ferdig. Derfor vil jeg tilby deg en veiledning om hvordan du lager en slik glidebryter. Det er enkelt å gjøre det selv, og koden tar mindre enn 2KB.

Oppgave

Lag en bildeglidebryter. Dimensjonene spiller ingen rolle, bare bildene skal være det samme størrelse... Ikke glem å inkludere jQuery før du kobler til skriptet:

Opprette en glidebryter

For å kontrollere glidebryteren vil en meny med hvite sirkler brukes, den aktive fanen vil være grønn. Menyen lages dynamisk. Webmasterens jobb er å lage en liste over bilder og tildele de riktige klassene. Et hvilket som helst antall skyveknapper kan plasseres på siden, de forstyrrer ikke hverandres arbeid.

Skyveknappen vil være slik:

For å kontrollere glidebryteren trenger du følgende kode:

Og stilene for glidebryteren trenger følgende:

Som du kan se, er koden ekstremt enkel. Jeg gjorde det ikke med vilje forskjellige stiler overganger, og stoppet nøyaktig på en enkel tilbakespoling av lysbilder. I tillegg vil ikke lysbildene endres automatisk. Jeg vet ikke hvordan noen, men jeg irriterer meg over all animasjon på siden som er produsert uten min viten.