Horisontalt innholdsglidebryter. Rulleglidebryter (karusell)

Retting fra 18. januar 2013:
Rettet en feil med automatisk rulling når du byttet fane eller minimerte nettleservinduet. Fjernet sjekk for tilstedeværelse av navneattributt på lenker fremover/bakover.
Kildearkivet er oppdatert.
Retting fra 19. juni 2013:
Lagt til muligheten til å bruke flere skyveknapper på en side, uten støtte for autorulling ennå, slik at kildearkivet og demosiden ikke ble oppdatert.
Rettet en feil der bilder dukket opp under pilene
Jeg svarte på hvordan du starter automatisk rulling uten å trykke på avspillingsknappen.

Skyveknapper (rotatorer for innhold [bilde, tekst, video]) er til stede i hvert prosjekt. Det er faktisk mange prosjekter på Internett hvor du kan laste ned og velge nesten hvilken som helst skyveplugin etter eget ønske. Imidlertid er det situasjoner når du kobler til et prosjekt en glidebryter, hvis minimerte versjon veier 10Kb eller mer, er upraktisk.

La oss si at du må lage en glidebryter som inneholder 15-20 bilder med bildetekst eller et par videoer. Det er for slike tilfeller denne leksjonen vil være nyttig for deg, hvor du lærer hvordan du lager en glidebryter med horisontal rulling, og et uoptimalisert skript vil veie mindre enn 2Kb. Ved å klikke på "Demo"-knappen nedenfor kan du se en demonstrasjon av leksjonen, og ved å klikke på "Kilde"-knappen vil du motta et arkiv av leksjonen (med kommentarer), forresten, for å lære hvordan du lager en enkel glidebryter på miniatyrbilder, les.

For å forstå essensen, vil jeg si at på slutten av leksjonen vil vi få en glidebryter med følgende funksjoner:

• Bytte lysbilde venstre-høyre
• Skyveknapp automatisk driftsmodus, start-pause-knapper
• Ubegrenset antall lysbilder

Slider layout

Skyveknappen er veldig enkel, vi trenger:

• generell beholder (glidebryter),
• Tre beholdere for navigasjon (to knapper for forrige/neste lysbilde (marine) og en knapp (auto) for start/pause-knappene),
• beholder for alle lysbilder (lysbildeliste),
• innpakning av alle lysbilder (slide-wrap).

...det vil være lysbilder i lysbildeelementbeholderen Første lysbilde Slider stiler

For å style glidebryteren, la oss legge til noen regler i stilfilen.

/* Angi innpakningstilbakestillingen */ .clear ( margin-top: -1px; høyde: 1px; clear:both; zoom: 1; ) /* Slider */ .slider ( /* Container width */ width: 900px; / * Ytre marger øverst og nederst */ marg: 50px auto; /* Indre marger for marine lenker */ polstring: 0 30px; elementer. , så vi forhindrer denne */ .slider::-moz-selection ( bakgrunn: transparent; farge: #fff; tekst-skygge: ingen; ) .slider::selection ( bakgrunn: transparent; farge: #fff; tekst -shadow: ingen; ) .slide-list (posisjon: relativ; margin: 0; polstring: 0; /* Skjul det som går utover grensene */ overflow: skjult; ) .slide-wrap (posisjon: relativ; venstre: 0px ; topp: 0; /* maksimalt mulig bredde på skyveomslaget float: left; ) .slide-title ( /* Font */ font: bold 16px monospace;

/* Indikerer at elementet er et blokkelement */ display: block; )

Og heller ikke uviktige stiler for forover/bakover og start/pause navigasjonsknappene

/* navigering forover/tilbake */ .navy ( /* absolutt posisjonering */ posisjon: absolutt; topp: 0; z-indeks: 1; høyde: 100%; /* elementbredde */ bredde: 30px; markør: peker; ) .prev-slide ( venstre: 0; bakgrunn: #dbdbdb url(bg/left-arrow.png) 11px 40% no-repeat; ) .next-slide (høyre: 0; bakgrunn: #dbdbdb url(bg/right -arrow.png) 13px 40% no-repeat; .navy.disable (bakgrunn: #dbdbdb; ) /* navigasjon start/pause */ .auto (bredde: 7px; høyde: 11px; markør: peker; margin: 10px auto; ) .play (bakgrunn: url(bg/play.png) center no-repeat; .pause (bakgrunn: url(bg/pause.png) center no-repeat; )

Husk at bakgrunnen til knappene er satt til den samme som den generelle bakgrunnen for å overlappe visningen av lysbilder. Nå er det turen til jQuery-skriptet, som vi skal gjøre.

Å skrive et manus

jQuery(document).ready(function())( function htmSlider())( /* Angi følgende parametere */ /* slider wrapper */ var slideWrap = jQuery(".slide-wrap"); /* forward/back og startknapper /pause */ var nextLink = jQuery(".next-slide"); var prevLink = jQuery(".prev-slide"); width with padding */ var slideWidth = jQuery(".slide-item").outerWidth(); /* slider offset */ var scrollSlider = slideWrap.position().venstre - slideWidth ved lenke til neste lysbilde .click(function())( if(!slideWrap.is(":animated")) ( slideWrap.animate((venstre: scrollSlider), 500, function())( slideWrap .find(" .slide-item:first ") .appendTo(slideWrap) .parent() .css(("venstre": 0)); )); ) )); /* Klikk på lenken til forrige lysbilde */ prevLink.click( function()) ( if(!slideWrap.is(":animated")) ( slideWrap .css(("venstre": scrollSlider)) .find(".slide-item:last") .prependTo(slideWrap) .parent( ) .animate ((venstre: 0), 500);

) ));

/* Funksjon for automatisk rulling av glidebryteren */ funksjon autoplay())( if(!is_animate)( is_animate = true; slideWrap.animate((venstre: scrollSlider), 500, function())( slideWrap .find(".slide -item:first ") .appendTo(slideWrap) .parent() .css(("venstre": 0)); is_animate = false; )); ) ) /* Klikk på lenker start/pause */ playLink.click( function())( if(playLink.hasClass("play"))( /* Endre klassen for knappen til pauseklassen */ playLink.removeClass("play").addClass("pause"); /* Legg til en klasse til frem/tilbake-knappene som skjuler dem */ jQuery(".navy").addClass("disable"); /* Initialiser autoplay()-funksjonen via en variabel slik at du kan deaktivere den senere */ timer = setInterval(autoplay, 1000) else ( playLink.removeClass( "pause").addClass("play"); /* vis frem/tilbake-knappene */ jQuery(".navy").removeClass("disable"); / * Deaktiver autoplay()-funksjonen */ clearInterval(timer) ));

• ) /* initialiser skyvefunksjonen */ htmSlider(); ));
• Forklaringer:
• Først av alt lager vi de nødvendige variablene for å forenkle arbeidet med koden:
• skyveomslag

glidebredde

Først animerte jeg ganske enkelt klikket på nextLink-knappen: ved å bruke animate()-funksjonen animerer vi glidebryteren som beveger seg til venstre med scrollSlider-verdien. Etter at denne hendelsen har skjedd, flytter du det første lysbildet i listen over lysbilder til slutten av listen, og setter venstre posisjon for lysbildelisteomslaget til 0 . Men det viste seg at hvis du raskt klikker på den 10 ganger, vil 10 bevegelser skje, og dette er en skikkelig feil.

Glidebryterens animasjonshendelse når forrige lysbildeknapp klikkes er litt annerledes:

De første trinnene er å stille inn posisjonen til lysbildeinnpakningen på venstre scrollSlider og flytte det siste lysbildet i omslaget helt til begynnelsen av listen, men legg merke til uten animasjon; Det andre trinnet er å animere posisjonen til glidebryteren for å endre til en verdi på 0 .

Så enkelt er det)

Skyvekontrollens auto-scroll-funksjon ligner på animasjonen som oppstår når du klikker på neste lysbildeknapp, ikke noe spesielt, jeg la den til for å kunne bruke jQuery-funksjonene riktig - setInterval og clearInterval - de er veldig kule)

Når du klikker på den automatiske skyveknappen, skjer følgende hendelser:

Hvis knappen har avspillingsklassen satt, endrer du denne klassen til pause, skjul forover/bakover-knappene [slik at de ikke forstyrrer glidebryterens drift], og start automatisk rulling ved å bruke tidtakervariabelen.

Hvis knappen har en pauseklasse, endrer vi denne klassen til å starte, viser frem/bakover-knappene og stopper tidtakervariabelen, som starter automatisk rulling.

Det siste trinnet er å initialisere skyvefunksjonen htmSlider();

To eller flere skyveknapper på en side

Dessverre har det ennå ikke vært mulig å implementere automatisk rulling av flere skyveknapper på en side, men alt annet fungerer med et smell. Så, kjære lesere, på din forespørsel legger jeg ut et skript for flere sykliske skyveknapper:

JQuery(document).ready(function())( //// ---> Sjekker om et element finnes på siden jQuery.fn.exists = function() ( return jQuery(this).length; ) /// / -- -> Glidebryter $(function())( if($(".slider").exists()) ( $(".slider").each(function())( var slider = $(this) ; var slideWrap = slider .find(".slide-wrap"), nextLink = slider.find(".next-slide"), prevLink = slider.find(".prev-slide"), slideWidth = slider.find( ".slide-item ").outerWidth(), scrollSlider = slideWrap.position().left - slideWidth; /* Klikk på lenken til neste lysbilde */ nextLink.click(function())( if(!slideWrap. is(":animated")) ( slideWrap.animate((venstre: scrollSlider), 500, function())( slideWrap .find(".slide-item:first") .appendTo(slideWrap) .parent() .css (("venstre": 0)) ; ) )); /* Klikk på lenken til forrige lysbilde */ prevLink.click(function())( if(!slideWrap.is(":animated") ) ( slideWrap .css(("venstre": scrollSlider )) .find(".slide-item:last") .prependTo(slideWrap) .parent() .animate((venstre: 0), 500);

) ));

...

));

) )); ));

Markeringen til den andre glidebryteren skiller seg fra den første bare ved at vi legger til en annen klasse til container.slider, som lar oss style den andre (tredje, n-te) skyveknappen slik vi trenger:

La oss utforme noen elementer av glidebryteren annerledes (reduser bredden på glidebryteren, skyv, angi en annen farge og skrifttype for lysbildeteksten):

Slider.slider2 ( width: 400px; ) .slider2 .slide-item ( width: 180px; ) .slider2 .slide-title ( font: fet 12px Arial; farge: #ed0000; ) .slider2 0pvy: (padding2 . ; ) .slider2 .slide-item img ( visning: blokk; bredde: 100 %; )

Konklusjon

• I dag så og lærte du hvordan du lager en grunnleggende animert glidebryter med horisontal rulling med egne hender uten å bruke plugins. Legg igjen dine spørsmål, ønsker og takk i kommentarene, alt godt!
Lære jQuery

Kan være nyttig:

Leir for tenåringer i Moskva-regionen, de beste barneleirene i Moskva-regionen.

Denne gangen vil vi komplisere html-oppmerkingen litt - vi vil bla ikke bare bilder, men blokker som inneholder tekst i tillegg til bilder. Vel, en annen endring vil påvirke rulleknappene. Vi vil også legge dem direkte til markeringen, og ikke bruke js, som vi gjorde i forrige eksempel. Her er hva du får til slutt:

forrige neste

• Bildetekst for bilde 1
• Bildetekst til bilde 2
• Bildetekst til bilde 3

Vi plasserer hele strukturen i en felles beholder med carousel_wrap-klassen. Vi designer knappene ved hjelp av span-elementer. En beholder med visual_block-klassen vil tjene som et vindu der innholdet i lysbildet vises, og selve lysbildene (vi vil ordne dem i form av en unummerert liste) må plasseres etter hverandre. Selvfølgelig er det ingen begrensninger på antall LI-elementer.

La oss designe utseendet ved hjelp av css:

Carousel_wrap ( margin: 50px auto; width:700px; position:relative; ) .visual_block ( margin: 0 auto; position: relative; overflow: hidden; ) .visual_block ul (posisjon: relativ; ) .visual_block ul, .visual_block li ( float: left; ) .carousel_wrap span.next, .carousel_wrap span.prev ( margin-top:-20px; width:15px; height:26px; display:block; text-indent:-9999px; overflow:hidden; cursor:pointer ; background:url(slider2_arrow.png) no-repeat; top:50%; .carousel_wrap span.next (right:0; background-position:-15px 0;) -15px -26px; .carousel_wrap span.prev:hover (bakgrunnsposisjon:0 -26px; )

Du kan begynne å skrive js-kode. La oss tenke på hvordan dette kan gjøres.

Nå er alle LI-elementer plassert under hverandre. For å oppnå dette må vi stille dem opp i én rad, sette bredden på visual_block lik bredden på ett lysbilde (da vises bare ett element - alt resten vil bli kuttet av) og få lysbildene til å skifte til samme bredde med visse intervaller. Det vil være mest praktisk hvis størrelsene på alle blokkene beregnes dynamisk. jQuery gjør dette på flere måter. For vårt tilfelle vil vi bruke outerWidth() og outerHeight() metodene. Disse metodene vil returnere dimensjonene til det valgte elementet med all utfylling. Og selvfølgelig, for å gjøre det praktisk å operere med verdier, vil vi lagre dem i variabler. La oss komme i gang.

Først, la oss deklarere variabler for wrapper-blokkene.

Var elWrap = $("div.carousel_wrap"), visual = $("div.visual_block") carousel = visual.children("ul");

Deretter vil vi legge til variablene som er synlige (vi vil lagre antall viste blokker i det - i vårt tilfelle er det 1), itemWidth , itemHeight og itemsTotal (her vil vi sette verdiene til bredden og høyden til ett lysbilde , samt deres totale antall).

Var elWrap = $(".carousel_wrap"), visual = $(".visual_block"), carousel = visual.children("ul"), synlig = 1, itemWidth = carousel.children().outerWidth(), itemHeight = carousel.children().outerHeight(), itemsTotal = carousel.children().length;

Nå kan vi enkelt beregne de nødvendige størrelsene på visual_block og visual_block ul-beholderne og tildele dem de nødvendige verdiene:

Visual.css(("width": synlig * itemWidth + "px", "height" : itemHeight)); carousel.css(("width": itemsTotal * itemWidth, "venstre": 0));

Designet har fått den nødvendige formen, men fungerer fortsatt ikke. Du må få lysbildene til å bevege seg (la oss si til venstre). Vi gjør dette ved å bruke animasjonsmetoden, som vil flytte UL-elementet til venstre.

Carousel.animate((venstre: -itemWidth), 500);

Her brukte vi den animerte metoden på UL-blokken og spesifiserte i parameterne at blokken skulle flyttes i forhold til venstre kant av visual_block med en avstand lik verdien av itemWidth-variabelen over en tidsperiode på 500 ml s. For å sikre at blokken beveger seg i ønsket retning, settes itemWidth-variabelen til en negativ verdi. Dessverre klarte ikke dette opptaket å oppnå ønsket resultat. Alt vi oppnådde var å forskyve UL i forhold til visual_block bare én gang. Det spiller ingen rolle, vi har allerede gjort triks med å gjenta den samme handlingen flere ganger (husk forrige eksempel). La oss gjøre det samme denne gangen. La oss lage en funksjon der vi vil "pakke" posten vår og kalle den ved å bruke setInterval-metoden, for eksempel hvert tredje sekund.

Funksjon changeLeft () ( carousel.animate((venstre: -itemWidth), 500); ) setInterval(changeLeft, 3000);

En annen feil - UL-forskyvningen oppstår fortsatt én gang. Dette er forståelig. Vi indikerte at elementet må flyttes av itemWidth , oppgaven er fullført og ingenting annet skjer. Etterfølgende anrop til funksjonen utløses. Hva om du tvinger UL til å gå tilbake? Hver gang funksjonen kalles opp, vil elementet være i sin utgangsposisjon. La oss prøve. Vi må returnere elementet etter at animasjonen er fullført. Så vi vil gi den den såkalte callBack-funksjonen som den tredje parameteren, som vil returnere UL til sin opprinnelige posisjon.

Funksjon changeLeft () ( carousel.animate((venstre: -itemWidth), 500, function() ( carousel.css(("venstre": 0 )); )); ) setInterval(changeLeft, 3000);

La oss se på resultatet. Ved første øyekast kan det virke som det ikke har kommet noe godt ut av det igjen. Hvert tredje sekund beveger det første lysbildet seg til venstre, gir etter for det andre og returnerer deretter umiddelbart... En fullstendig feil.

Dette er faktisk ikke sant. Vi trenger bare å gjøre noen flere handlinger i callBack-funksjonen, nemlig klone det første elementet (som er skjult) og plassere klonen helt på slutten av karusellen, fjern deretter dette elementet i begynnelsen av karusellen og først da returner UL til sin plass. La oss gjennomføre planene våre.

Funksjon changeLeft() ( var item = carousel.children().eq(0); carousel.animate((venstre: -itemWidth), 500, function() ( item.clone().appendTo(carousel); item.remove (); carousel.css(("venstre": 0 ));

I changeLeft-funksjonen erklærer vi et variabelelement der vi skal lagre det første lysbildet. Så i callBack-funksjonen kloner vi lysbildet, flytter klonen til enden av karusellen og sletter selve elementet. Som et resultat venter fullstendig suksess på oss. Vi har lansert automatisk rulling. All koden ser nå slik ut:

$(document).ready(function())( var elWrap = $(".carousel_wrap"), visual = $(".visual_block"), carousel = visual.children("ul"), visible = 1, itemWidth = carousel .children().outerWidth(), itemHeight = carousel.children().outerHeight(), itemsTotal = carousel.children().length(("width": visible * itemWidth + "px", " height " : itemHeight)); carousel.css(("width": itemsTotal * itemWidth, "left": 0)); funksjon changeLeft () ( var item = carousel.children().eq(0); carousel.animate ( (venstre: -itemWidth), 500, function() ( item.clone().appendTo(carousel); item.remove(); carousel.css(("left": 0 )); ) ) setInterval(changeLeft) 3000);

Last ned den ferdige koden

I den neste artikkelen vil vi avslutte arbeidet med karusell-glidebryteren ved å få navigasjonsknappene til å fungere.

Foreløpig er en glidebryter - karusell - en funksjonalitet som ganske enkelt er nødvendig å ha på et forretningsnettsted, porteføljenettsted eller en hvilken som helst annen ressurs. Sammen med skyveknapper for fullskjermbilder passer horisontale karusellglidebrytere godt inn i ethvert webdesign.

Noen ganger bør glidebryteren oppta en tredjedel av sidesiden. Her brukes karusellglideren med overgangseffekter og responsive oppsett. Netthandelssider bruker en karusellglidebryter for å vise flere bilder i individuelle innlegg eller sider. Skyvekoden kan fritt brukes og modifiseres i henhold til dine behov.

Ved å bruke JQuery i forbindelse med HTML5 og CSS3 kan du gjøre sidene dine mer interessante, gi dem unike effekter og trekke oppmerksomheten til besøkende til et bestemt område av nettstedet.

Slick – moderne karusellskyveplugin

Slick er en fritt tilgjengelig jquery-plugin hvis utviklere hevder at løsningen deres vil tilfredsstille alle skyvekravene dine. Adaptiv skyveknapp - karusell kan fungere i "flis"-modus for mobile enheter, og i "dra og slipp"-modus for skrivebordsversjonen.

Inneholder en "fade"-overgangseffekt, en interessant "sentermodus"-funksjon, lat innlasting av bilder med automatisk rulling. Oppdatert funksjonalitet inkluderer å legge til lysbilder og et lysbildefilter. Alt for å sikre at du konfigurerer plugin-en i henhold til dine krav.

Demomodus | Last ned

Owl Carousel 2.0 – jQuery – plugin for bruk på berøringsenheter

Denne plugin har et stort sett med funksjoner, egnet for både nybegynnere og erfarne utviklere. Dette er en oppdatert versjon av karusellglideren. Hans forgjenger hadde samme navn.

Skyveknappen har noen innebygde plugins for å forbedre den generelle funksjonaliteten. Animasjon, videoavspilling, skyveautomatikk, lat lasting, automatisk høydejustering – dette er hovedfunksjonene til Owl Carousel 2.0.

Dra og slipp-støtte er inkludert for mer praktisk bruk av plugin på mobile enheter.
Programtillegget er perfekt for å vise store bilder selv på små skjermer på mobile enheter.

Eksempler | Last ned

jQuery-plugin Silver Track

En ganske liten, men funksjonsrik jquery-plugin som lar deg plassere en glidebryter på en side - en karusell, som har en liten kjerne og ikke bruker mye nettstedsressurser. Plugin-en kan brukes til å vise vertikale og horisontale glidere, med animasjon og lage sett med bilder fra galleriet.

Eksempler | Last ned

AnoSlide – Ultrakompakt responsiv jQuery-glidebryter

Ultrakompakt jQuery-glidebryter - karusell, hvis funksjonalitet er mye større enn en vanlig skyveknapp. Disse inkluderer forhåndsvisning av enkeltbilder, karusellvisning med flere bilder og tittelbasert skyvevisning.

Eksempler | Last ned

Uglekarusell – Jquery-glidebryter – karusell

Uglekarusell er en glidebryter som støtter berøringsskjermer og dra-og-slipp-teknologi, enkelt integrert i HTML-kode. Plugin-en er en av de beste glidebryterne som lar deg lage vakre karuseller uten noe spesielt forberedt markering.

Eksempler | Last ned

3D-galleri - karusell

Bruker 3D-overganger basert på CSS-stiler og litt Javascript-kode.

Eksempler | Last ned

3D-karusell med TweenMax.js og jQuery

Storslått 3D-karusell. Det ser ut til at dette fortsatt er en betaversjon, fordi jeg oppdaget et par problemer med den akkurat nå. Hvis du er interessert i å teste og lage dine egne glidere, vil denne karusellen være til stor hjelp.

Eksempler | Last ned

Karusell med bootstrap

Responsiv glidebryter - karusell ved hjelp av bootstrap-teknologi kun for din nye nettside.

Eksempler | Last ned

Moving Box-karusellglidebryter basert på Bootstrap-rammeverket

Mest populær på portefølje- og forretningsnettsteder. Denne typen glidebryter - karusell - finnes ofte på nettsteder av alle typer.

Eksempler | Last ned

Tiny Circleslider

Denne lille skyveknappen er klar til å fungere på enheter med hvilken som helst skjermoppløsning. Skyveknappen kan fungere i både sirkulær og karusellmodus. Tiny circle presenteres som et alternativ til andre glidere av denne typen. Det er innebygd støtte for IOS- og Android-operativsystemer.

I sirkulær modus ser glidebryteren ganske interessant ut. Utmerket støtte for dra og slipp-metoden og et automatisk rullesystem for lysbilder.

Eksempler | Last ned

Innholdsglidebryter for tommelen

En kraftig, adaptiv, karusellglidebryter er perfekt for et moderne nettsted. Fungerer riktig på alle enheter. Har horisontal og vertikal modus. Størrelsen er minimert til bare 1 KB. Den ultrakompakte plugin-modulen har også utmerkede jevne overganger.

Eksempler | Last ned

Wow – glidebryter – karusell

Inneholder mer enn 50 effekter, som kan hjelpe deg med å lage en original glidebryter for nettstedet ditt.

Eksempler | Last ned

Responsiv jQuery-innholdsglidebryter bxSlider

Endre størrelsen på nettleservinduet for å se hvordan glidebryteren tilpasser seg. Bxslider kommer med mer enn 50 tilpasningsalternativer og viser frem funksjonene med forskjellige overgangseffekter.

Eksempler | Last ned

jKarusell

jCarousel er en jQuery-plugin som hjelper deg med å organisere visningen av bildene dine. Du kan enkelt lage egendefinerte bildekaruseller fra basen vist i eksempelet. Skyveknappen er adaptiv og optimalisert for arbeid på mobile plattformer.

Eksempler | Last ned

Scrollbox - jQuery-plugin

Scrollbox er en kompakt plugin for å lage en glidebryter - en karusell eller en tekstgjennomgang. Viktige funksjoner inkluderer vertikale og horisontale rulleeffekter med pause ved museover.

Eksempler | Last ned

dbpasKarusell

En enkel karusellglider. Hvis du trenger en rask plugin, er denne 100 % egnet. Leveres med kun de grunnleggende funksjonene som kreves for at glidebryteren skal fungere.

Eksempler | Last ned

Flexisel: Responsive JQuery Slider Plugin - Karusell

Skaperne av Flexisel ble inspirert av den gamle skolens plugin jCarousel, og laget en kopi av den med sikte på riktig bruk av glidebryteren på mobil- og nettbrett.

Flexisels responsive layout, når den kjøres på mobile enheter, er forskjellig fra en layout i nettleservindustørrelse. Flexisel er perfekt tilpasset for å fungere på skjermer, både lav og høy oppløsning.

Eksempler | Last ned

Elastislide – adaptiv skyveknapp – karusell

Elastislide tilpasser seg perfekt til størrelsen på enhetens skjerm. Du kan angi minimum antall bilder som skal vises med en bestemt oppløsning. Fungerer godt som en karusellglidebryter med bildegallerier, ved hjelp av en fast omslag sammen med en vertikal rulleeffekt.

Eksempel | Last ned

FlexSlider 2

Freeware skyveknapp fra Woothemes. Det regnes med rette som en av de beste adaptive glidebryterne. Programtillegget inneholder flere maler og vil være nyttig for både nybegynnere og eksperter.

Eksempel | Last ned

Fantastisk karusell

Fantastisk karusell – responsiv bildeglidebryter ved hjelp av jQuery. Støtter mange innholdsstyringssystemer som WordPress, Drupal og Joomla. Støtter også Android og IOS og stasjonære operativsystemer uten kompatibilitetsproblemer. Innebygde fantastiske karusellmaler lar deg bruke glidebryteren i vertikale, horisontale og sirkulære moduser.

Eksempler | Last ned

Tiden står ikke stille og går med den. Dette påvirket også Internett. Du kan allerede se hvordan utseendet til nettsider endrer seg, er spesielt populært. Og i denne forbindelse har det dukket opp ganske mange nye adaptive jquery-glidere, gallerier, karuseller eller lignende plugins.
1. Skyveknapp for responsive horisontale innlegg

Adaptiv horisontal karusell med detaljerte monteringsanvisninger. Den er laget i en enkel stil, men du kan style den slik at den passer deg selv.

2. Skyv på Glide.js

Denne glidebryteren passer for alle nettsider. Den bruker åpen kildekode Glide.js. Skyvefargene kan enkelt endres.

3. Lysbildefremvisning med skråstilt innhold

Responsiv glidebryter med innhold. Høydepunktet på denne glidebryteren er 3D-effekten til bildene, samt forskjellige animasjoner av tilfeldig utseende.

4. Skyveknapp ved hjelp av HTML5-lerret

En veldig vakker og imponerende glidebryter med interaktive partikler. Den ble laget med HTML5-lerret,

5. Glidebryter for bildeforvandling

Glidebryter med en morphing-effekt (Jevn transformasjon fra ett objekt til et annet). I dette eksempelet er glidebryteren godt egnet for porteføljen til en webutvikler eller webstudio i form av en portefølje.

6. Sirkulær glidebryter

Skyveknapp i form av en sirkel med effekten av å snu bildet.

7. Glidebryter med uskarp bakgrunn

Adaptiv glidebryter med veksling og bakgrunnsuskarphet.

8. Responsiv mote-glidebryter

Enkel, lett og responsiv glidebryter for nettsiden.

9. Slicebox - jQuery 3D bildeglidebryter (OPPDATERT)

Oppdatert versjon av Slicebox-glidebryteren med rettelser og nye funksjoner.

10.Gratis animert responsivt bilderutenett

JQuery-plugin for å lage et fleksibelt bilderutenett som vil bytte bilder ved hjelp av forskjellige animasjoner og tidspunkter. Dette kan se bra ut som bakgrunn eller dekorativt element på en nettside, da vi selektivt kan vise nye bilder og deres overganger. Plugin kommer i flere versjoner.

11.Fleksibel glider

En universell gratis plugin for nettstedet ditt. Denne plugin-en kommer i flere skyve- og karusellalternativer.

12. Fotoramme

Fotorama er en universell plugin. Den har mange innstillinger, alt fungerer raskt og enkelt, og du kan se lysbilder i fullskjerm. Glideren kan brukes både i fast størrelse og adaptiv, med eller uten miniatyrbilder, med eller uten sirkulær rulling, og mye mer.

P.S. Jeg installerte skyveknappen flere ganger, og jeg tror at den er en av de beste

13. Gratis og adaptivt 3D-skyvegalleri med miniatyrbilder.

Eksperimentelt skyvegalleri 3DPanelLayout med et rutenett og interessante animasjonseffekter.

14. Skyveknapp på css3

Den adaptive glidebryteren er laget ved hjelp av css3 med jevn utseende av innhold og lett animasjon.

15. WOW Slider

WOW Slider er en bildeglidebryter med fantastiske visuelle effekter.

17. Elastikk

Elastisk glidebryter med full respons og lysbildeminiatyrbilder.

18. Spalte

Dette er en responsiv glidebryter på full skjerm som bruker css3-animasjon. Glideren er laget i to versjoner. Animasjonen er gjort ganske uvanlig og vakkert.

19. Adaptivt bildegalleri pluss

En enkel gratis galleriglidebryter med bildelasting.

20. Responsive Slider for WordPress

Adaptiv gratis skyveknapp for WP.

21. Parallax Content Slider

Skyveknapp med parallakseeffekt og kontroll av hvert element ved hjelp av CSS3.

22. Glidebryter med musikklenke

Glidebryteren bruker JPlayer åpen kildekode. Denne glidebryteren ligner en presentasjon med musikk.

23. Skyveknapp med jmpress.js

Den responsive glidebryteren er basert på jmpress.js og vil derfor tillate deg å legge til noen interessante 3D-effekter til lysbildene dine.

24. Raskt hover lysbildefremvisning

Lysbildefremvisning med rask lysbildebytte. Lysbildebryter på sveving.

25. Bildetrekkspill med CSS3

Bilde trekkspill ved hjelp av css3.

26. En Touch Optimized Gallery Plugin

Dette er et responsivt galleri som er optimalisert for berøringsenheter.

27. 3D-galleri

3D Wall Gallery - laget for Safari-nettleseren, hvor 3D-effekten vil være synlig. Hvis du ser på det i en annen nettleser, vil funksjonaliteten være fin, men 3D-effekten vil ikke være synlig.

28. Glidebryter med paginering

Responsiv glidebryter med paginering ved hjelp av JQuery UI-glidebryteren. Tanken er å bruke et enkelt navigasjonskonsept. Det er mulig å spole tilbake alle bilder eller bytte lysbilde for lysbilde.

29. Bildemontering med jQuery

Ordne bilder automatisk avhengig av skjermbredden. En veldig nyttig ting når du utvikler et porteføljenettsted.

30. 3D-galleri

En enkel 3D sirkulær glidebryter som bruker css3 og jQuery.

31. Fullskjermmodus med 3D-effekt ved hjelp av css3 og jQuery

En glidebryter med muligheten til å vise fullskjermbilder med en vakker overgang.

Vi trenger en enkel skyveknapp med automatisk rulling. La oss komme i gang...

Beskrivelse av hvordan glidebryteren fungerer.

Lysbildene vil bli stilt opp og vil rulle etter en viss tid.

Den røde rammen viser den synlige delen av glidebryteren.

På slutten av glidebryteren må du duplisere det første lysbildet. Dette er nødvendig for å sikre rulling fra det tredje lysbildet til det første. Du må også legge til det siste lysbildet i begynnelsen for å kunne rulle bakover fra det første lysbildet til det tredje. Nedenfor vises hvordan glidebryteren fungerer i retning forover.

Når glidebryteren når slutten, plasseres en kopi av den fra begynnelsen av glidebryteren umiddelbart i stedet for det siste lysbildet. Deretter gjentas syklusen igjen. Dette skaper en illusjon av en endeløs skyveknapp.

HTML-oppmerking

La oss først lage en enkel glidebryter med automatisk rulling. Det krever to containere for å operere. Den første vil angi størrelsen på det synlige området til glidebryteren, og den andre er nødvendig for å plassere glidebrytere i den. Glidebryterens layout vil se slik ut:

Slider styles .slider-box( width : 320px ; height : 210px ; overflow : hidden ; ) .slider( position : relative ; width : 10000px ; height : 210px ; ) .slider index img( ; float index: 0 )

Container.slider-box angir dimensjonene til glideren. Ved å bruke overflow:hidden-egenskapen skjules alle elementer som ikke er inkludert i området inne i elementet.

Container.slider er satt til en større bredde. Dette er nødvendig slik at alle lysbildene passer inn i linjen.

Lysbilder justeres ved hjelp av float:left-egenskapen.

Nedenfor er en skjematisk layout av skyveblokkene.

Manus

Bevegelsen av lysbildene vil bli utført ved jevnt å endre margin-venstre-egenskapen til container.slider.

$(function () ( var width= $(".slider-box" ) .width () ; // Slider width. interval = 4000 ; // Slide change interval. $(".slider img:last" ) .clone ().prependTo(".slider" ); // En kopi av det siste lysbildet er plassert i begynnelsen // Container.slider er forskjøvet til venstre med bredden av ett lysbilde("animation()". intervall) ; // Animasjon()-funksjonen startes for å endre lysbilder.

function animation() ( var margin = parseInt($(".slider" ) .css ("marginLeft") ); // Current block offset.slider width= $(".slider-box" ) .width () , / / Slider width= $(".slider" ) .children ().length ; // Antall lysbilder i glidebryteren hvis (margin!= (- width* (slidersAmount- 1 ) ) ) // Hvis gjeldende. lysbildet er ikke det siste , ( margin= margin-width; // så reduseres marginverdien med bredden på lysbildet. ) else ( // Hvis det siste lysbildet vises, $(".slider" ) . css ("margin-left" , - width) ; // deretter returnerer block.slider til sin opprinnelige posisjon, margin=- width* 2 ) $(".slider") .animate (( marginLeft: margin) , 1000 ) ; // Block.slider er flyttet til venstre med 1 lysbilde ) ;