Vandret indholdsskyder. Rulleskyder (karrusel)

Rettelse fra 18. januar 2013:
Rettede en fejl med automatisk rulning, når du skiftede faner eller minimerer browservinduet. Fjernet kontrol for tilstedeværelsen af ​​navneattributten på frem-/tilbage-links.
Kildearkivet er blevet opdateret.
Rettelse fra 19. juni 2013:
Tilføjet muligheden for at bruge flere skydere på en side, uden understøttelse af autoscrolling endnu, så kildearkivet og demosiden blev ikke opdateret.
Rettede en fejl, hvor billeder dukkede op under pilene
Jeg svarede, hvordan man starter autoscrolling uden at trykke på afspilningsknappen.

Skydere (indhold [billede, tekst, video] rotatorer) er til stede i hvert projekt. Der er faktisk en masse projekter på internettet, hvor du kan downloade og vælge næsten ethvert skyder-plugin efter din smag. Der er dog situationer, når du forbinder til et projekt med en skyder, hvis minimerede version vejer 10Kb eller mere, er upraktisk.

Lad os sige, at du skal lave en skyder, der indeholder 15-20 billeder med billedtekster eller et par videoer. Det er til sådanne tilfælde, at denne lektion vil være nyttig for dig, hvor du lærer at lave en skyder med vandret rulning, og et uoptimeret script vil veje mindre end 2Kb. Ved at klikke på "Demo"-knappen nedenfor kan du se en demonstration af lektionen, og ved at klikke på "Kilde"-knappen vil du modtage et arkiv af lektionen (med kommentarer), for at lære at lave en simpel skyder på thumbnails, læs.

For at forstå essensen vil jeg sige, at i slutningen af ​​lektionen får vi en skyder med følgende funktioner:

• Skifter dias venstre-højre
• Skyder automatisk driftstilstand, start-pause knapper
• Ubegrænset antal dias

Slider layout

Skydermarkeringen er meget enkel, vi har brug for:

• generel beholder (skyder),
• Tre containere til navigation (to knapper til forrige/næste dias (marine) og en knap (auto) til start/pause knapperne),
• beholder til alle dias (slide-liste),
• indpakning af alle objektglas (slide-wrap).

...der vil være slides i slide-emne-beholderen Første slide Slider stilarter

For at style skyderen, lad os tilføje et par regler til stilfilen.

/* Indstil ombrydningsnulstillingen */ .clear ( margin-top: -1px; højde: 1px; clear:both; zoom: 1; ) /* Slider */ .slider ( /* Container width */ width: 900px; / * Ydre marginer øverst og nederst */ margin: 50px auto; /* Indre marginer for navy links */ polstring: 0 30px . , så vi forhindrer denne */ .slider::-moz-selection ( baggrund: transparent; farve: #fff; tekst-skygge: ingen; ) .slider::selection ( baggrund: gennemsigtig; farve: #fff; tekst- skygge: ingen; ) .slide-list (position: relativ; margin: 0; polstring: 0; /* Skjul det, der går ud over grænserne */ overløb: skjult; ) .slide-wrap (position: relativ; venstre: 0px; top: 0; /* maksimalt mulig bredde på skyderen */ width: 10000000px; .slide-item ( /* Slide width */ width: 280px; /* Padding */ padding: 10px; /* Wrapping */ float : venstre; ) .slide-title ( /* Skrifttype */ skrifttype: fed 16px monospace; /* Angiv at elementet er et blokelement */ display: blok; )

Og heller ikke uvæsentlige stilarter for navigationsknapperne frem/tilbage og start/pause

/* frem/tilbage navigation */ .navy ( /* absolut positionering */ position: absolut; top: 0; z-indeks: 1; højde: 100%; /* elementbredde */ bredde: 30px; markør: pointer; ) .prev-slide ( venstre: 0; baggrund: #dbdbdb url(bg/left-arrow.png) 11px 40% no-repeat; ) .next-slide ( højre: 0; baggrund: #dbdbdb url(bg/right -arrow.png) 13px 40% no-repeat; .navy.disable (baggrund: #dbdbdb; ) /* navigation start/pause */ .auto (bredde: 7px; højde: 11px; markør: pointer; margin: 10px auto; ) .play (baggrund: url(bg/play.png) center no-repeat; ) .pause (baggrund: url(bg/pause.png) center no-repeat;)

Husk, at knappernes baggrund er sat til den samme som den generelle baggrund for at overlappe visningen af ​​dias. Nu er det tid til jQuery-scriptet, hvilket vi vil gøre.

At skrive et manuskript

Glem ikke, at du først skal inkludere jQuery-biblioteket. Og så skriver vi et skyderscript og initialiserer det. Først er her en komplet kodeliste, og så vil jeg forklare, hvad der foregår her:

jQuery(document).ready(function())( function htmSlider())( /* Indstil følgende parametre */ /* slider wrapper */ var slideWrap = jQuery(".slide-wrap"); /* frem/tilbage 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().left - slideWidth ved link til næste slide .click(function())( if(!slideWrap.is(":animated")) ( slideWrap.animate((venstre: scrollSlider), 500, function())( slideWrap .find(" .slide-item:first ") .appendTo(slideWrap) .parent() .css(("venstre": 0)); )); ) )); /* Klik på linket til det forrige dias */ prevLink.click( function()) ( if(!slideWrap.is(":animated")) ( slideWrap .css(("venstre": scrollSlider)) .find(".slide-item:last") .prependTo(slideWrap) .parent( ) .animate ((venstre: 0), 500); ) )); /* Funktion til automatisk at rulle skyderen */ funktion 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; )); ) ) /* Klik på links start/pause */ playLink.click( function())( if(playLink.hasClass("play"))( /* Skift knappens klasse til pauseklassen */ playLink.removeClass("play").addClass("pause"); /* Tilføj en klasse til frem/tilbage-knapperne, der skjuler dem */ jQuery(".navy").addClass("disable"); /* Initialiser autoplay()-funktionen via en variabel, så du kan deaktivere den senere */ timer = setInterval(autoplay, 1000) else ( playLink.removeClass( "pause").addClass("play"); /* vis frem/tilbage-knapperne */ jQuery(".navy").removeClass("disable"); / * Deaktiver autoplay()-funktionen */ clearInterval(timer) )); ) /* initialiser skyderfunktionen */ htmSlider(); ));

Forklaringer:

Først og fremmest opretter vi de nødvendige variabler for at forenkle arbejdet med koden:

• skyderindpakning
• glidebredde
• skyderen wrap offset
• navigationsknapper

Den anden handling er en beskrivelse af klik på frem/tilbage-knapperne

Først animerede jeg blot klikket på knappen nextLink: ved at bruge animate()-funktionen animerer vi skyderindpakningen, der bevæger sig til venstre med scrollSlider-værdien. Når denne hændelse er indtruffet, skal du flytte det første dias på listen over dias til slutningen af ​​listen og indstille venstre position for diaslisteindpakningen til 0 . Men det viste sig, at hvis du hurtigt klikker på det 10 gange, vil der ske 10 bevægelser, og det er en rigtig fejl.

Skyderanimationshændelsen, når der klikkes på den forrige slideknap, er lidt anderledes:

De første trin er at indstille placeringen af ​​slide wrapper på venstre scrollSlider og flytte det sidste slide i wrapper til begyndelsen af ​​listen, men bemærk uden animation; Det andet trin er at animere skyderindpakningens position, så den ændres til en værdi på 0 .

Så enkelt er det)

Skyderens auto-scroll-funktion ligner den animation, der opstår, når du klikker på den næste slide-knap, ikke noget særligt, jeg tilføjede det for at kunne bruge jQuery-funktionerne korrekt - setInterval og clearInterval - de er virkelig seje)

Når du klikker på den automatiske skyderknap, sker følgende hændelser:

Hvis knappen har en afspilningsklasse, så skift denne klasse til pause, skjul frem/tilbage-knapperne [så de ikke forstyrrer skyderens betjening], og start autoscrollning ved hjælp af timer-variablen.

Hvis knappen har en pauseklasse, så ændrer vi denne klasse til at starte, viser frem/tilbage-knapperne og stopper timer-variablen, som starter autoscrolling.

Det sidste trin er at initialisere skyderfunktionen htmSlider();

To eller flere skydere på en side

Desværre har det endnu ikke været muligt at implementere auto-scrolling af flere skydere på en side, men alt andet fungerer med et brag. Så kære læsere, på din anmodning poster jeg et script til flere cykliske skydere:

JQuery(document).ready(function())( //// ---> Tjek om et element findes på siden jQuery.fn.exists = function() ( return jQuery(this).length; ) /// / -- -> Skyder $(function())( if($(".skyder").exists()) ( $(".skyder").each(function())( var skyder = $(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; /* Klik på linket til næste slide */ nextLink.click(function())( if(!slideWrap. is(":animated")) ( slideWrap.animate((venstre: scrollSlider), 500, function())( slideWrap .find(".slide-item:first") .appendTo(slideWrap) .parent() .css (("venstre": 0)) ; ) )); /* Klik på linket til det forrige dias */ prevLink.click(function())( if(!slideWrap.is(":animated") ) ( slideWrap .css(("venstre": scrollSlider )) .find(".slide-item:last") .prependTo(slideWrap) .parent() .animate((venstre: 0), 500); ) )); )); ) )); ));

Opmærkningen af ​​den anden skyder adskiller sig kun fra den første ved, at vi tilføjer en anden klasse til container.slider, som giver os mulighed for at style den anden (tredje, n.) skyder, som vi har brug for:

...

Lad os designe nogle elementer af skyderen anderledes (reducer bredden af ​​skyderen, skyd, indstil en anden farve og skrifttype til diasteksten):

Slider.slider2 ( width: 400px; ) .slider2 .slide-item ( width: 180px; ) .slider2 .slide-title ( skrifttype: fed 12px Arial; farve: #ed0000; ) .slider2 0pvy: (padding2 . ; ) .slider2 .slide-item img (display: blok; bredde: 100%;)

Konklusion

I dag har du set og lært, hvordan du opretter en grundlæggende animeret skyder med vandret rulning med dine egne hænder uden at bruge plugins. Efterlad dine spørgsmål, ønsker og tak i kommentarerne, alt det bedste!

At lære jQuery

Kan være nyttigt:

• Lejr for teenagere i Moskva-regionen, de bedste børnelejre i Moskva-regionen.
Rulleskyder (karrusel)

Lad os som altid starte med en problemformulering: denne gang skal vi lave en skyder, der vil rulle billeder ved hjælp af en shift-effekt. Den skal naturligvis have navigationsknapper, og animationen skal stoppe, hvis musemarkøren er i karruselområdet.

Til navigationsknapperne vil vi bruge det samme billede som i det foregående eksempel:

Denne gang vil vi komplicere html-markeringen lidt - vi ruller ikke kun billeder, men blokke, der indeholder tekst ud over billeder. Nå, en anden ændring vil påvirke rulleknapperne. Vi vil også tilføje dem direkte til markeringen og ikke bruge js, som vi gjorde i det forrige eksempel. Her er hvad du får til sidst:

Forrige næste

• Billedtekst til billede 1
• Billedtekst til billede 2
• Billedtekst til billede 3

Vi placerer hele strukturen i en fælles beholder med klassen carousel_wrap. Vi designer knapperne ved hjælp af spændelementer. En beholder med klassen visual_block vil fungere som et vindue, hvor indholdet af sliden vil blive vist, og selve slides (vi arrangerer dem i form af en unummereret liste) skal placeres efter hinanden. Selvfølgelig er der ingen begrænsninger på antallet af LI-elementer.

Lad os designe udseendet ved hjælp af css:

Carousel_wrap ( margin: 50px auto; width:700px; position:relative; ) .visual_block ( margin: 0 auto; position: relativ; overflow: hidden; ) .visual_block ul (position: 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 ( højre: -15px -26px; .carousel_wrap span.prev:hover (baggrundsposition:0 -26px;)

Du kan begynde at skrive js-kode. Lad os tænke over, hvordan dette kan gøres.

Nu er alle LI-elementer placeret under hinanden. For at opnå dette skal vi placere dem i én række, indstille bredden af ​​visual_block lig med bredden af ​​et dias (så vil kun ét element blive vist - resten vil blive skåret af) og få diasene til at skifte til samme bredde med visse intervaller. Det vil være mest bekvemt, hvis størrelserne på alle blokke beregnes dynamisk. jQuery gør dette på flere måder. I vores tilfælde vil vi bruge outerWidth() og outerHeight() metoderne. Disse metoder returnerer dimensionerne af det valgte element med al polstring. Og selvfølgelig, for at gøre det praktisk at arbejde med værdier, gemmer vi dem i variabler. Lad os komme igang.

Lad os først erklære variablerne for indpakningsblokkene.

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

Dernæst tilføjer vi de synlige variable (vi gemmer antallet af viste blokke i det - i vores tilfælde er det 1), itemWidth , itemHeight og itemsTotal (her vil vi sætte værdierne for bredden og højden af ​​et dias , samt deres samlede antal).

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;

Nu kan vi nemt beregne de nødvendige størrelser af visual_block og visual_block ul containere og tildele dem de nødvendige værdier:

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

Designet har fået den nødvendige form, men fungerer stadig ikke. Du skal få diasene til at bevæge sig (lad os sige til venstre). Vi gør dette ved at bruge animationsmetoden, som vil flytte UL-elementet til venstre.

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

Her anvendte vi den animerede metode til UL-blokken og specificerede i parametrene, at blokken skulle flyttes i forhold til venstre kant af visual_block med en afstand svarende til værdien af ​​itemWidth-variablen over en tidsperiode på 500 ml s. For at sikre, at blokken bevæger sig i den ønskede retning, sættes variabelen itemWidth til en negativ værdi. Desværre lykkedes det ikke med denne optagelse at opnå det ønskede resultat. Alt, hvad vi opnåede, var at udligne UL i forhold til visual_block kun én gang. Det gør ikke noget, vi har allerede lavet tricks med at gentage den samme handling flere gange (husk det forrige eksempel). Lad os gøre det samme denne gang. Lad os oprette en funktion, som vi vil "pakke" vores registrering i og kalde den ved hjælp af setInterval-metoden, f.eks. hvert tredje sekund.

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

Endnu en fejl - UL-offset forekommer stadig én gang. Det er forståeligt. Vi angav, at elementet skal flyttes af itemWidth , opgaven er fuldført, og intet andet sker. Efterfølgende kald til funktionen udløses. Hvad hvis du tvinger UL til at gå tilbage? Så hver gang funktionen kaldes, vil elementet være i sin udgangsposition. Lad os prøve. Vi skal returnere elementet, efter at animation er afsluttet. Så vi giver den den såkaldte callBack-funktion som den tredje parameter, som vil returnere UL til sin oprindelige position.

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

Lad os se på resultatet. Umiddelbart kan det se ud til, at der ikke er kommet noget godt ud af det igen. Hvert tredje sekund flytter det første dias til venstre, giver plads til det andet og vender derefter straks tilbage... En fuldstændig fiasko.

Faktisk er dette ikke sandt. Vi skal bare lave et par handlinger mere i callBack-funktionen, nemlig at klone det første element (som er skjult) og placere klonen helt i slutningen af ​​karrusellen, derefter fjerne dette element i begyndelsen af ​​karrusellen og først derefter returnere UL til sin plads. Lad os gennemføre vores planer.

Funktion 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-funktionen erklærer vi et variabelt element, hvori vi gemmer det første slide. Så i callBack-funktionen kloner vi sliden, flytter klonen til slutningen af ​​karrusellen og sletter selve elementet. Som et resultat venter der fuldstændig succes på os. Vi har lanceret automatisk rulning. Hele koden ser nu sådan ud:

$(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)); funktion 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);

Download den færdige kode

I den næste artikel afslutter vi arbejdet med karruselskyderen ved at få navigationsknapperne til at virke.

I øjeblikket er en skyder - karrusel - en funktionalitet, der simpelthen er nødvendig at have på en virksomhedshjemmeside, porteføljewebsted eller enhver anden ressource. Sammen med skydere til fuldskærmsbilleder passer vandrette karruselskydere godt ind i ethvert webdesign.

Nogle gange bør skyderen optage en tredjedel af webstedets side. Her bruges karruselskyderen med overgangseffekter og responsive layouts. E-handelswebsteder bruger en karruselskyder til at vise flere billeder i individuelle indlæg eller sider. Skyderkoden kan frit bruges og ændres efter dine behov.

Ved at bruge JQuery i forbindelse med HTML5 og CSS3 kan du gøre dine sider mere interessante, give dem unikke effekter og henlede besøgendes opmærksomhed på et bestemt område af webstedet.

Slick – moderne karrusel-skyder-plugin

Slick er et frit tilgængeligt jquery-plugin, hvis udviklere hævder, at deres løsning vil tilfredsstille alle dine skyderkrav. Adaptiv skyder - karrusel kan fungere i "tile"-tilstand for mobile enheder og i "træk og slip"-tilstand for desktop-versionen.

Indeholder en "fade" overgangseffekt, en interessant "center mode" funktion, doven indlæsning af billeder med automatisk rulning. Opdateret funktionalitet omfatter tilføjelse af dias og et diasfilter. Alt sammen for at sikre, at du konfigurerer plugin'et i overensstemmelse med dine krav.

Demotilstand | Hent

Owl Carousel 2.0 – jQuery – plugin til brug på touch-enheder

Dette plugin har et stort sæt funktioner, der passer til både begyndere og erfarne udviklere. Dette er en opdateret version af karruselskyderen. Hans forgænger havde samme navn.

Skyderen har nogle indbyggede plugins for at forbedre den overordnede funktionalitet. Animation, videoafspilning, skyder autoplay, doven indlæsning, automatisk højdejustering - disse er hovedfunktionerne i Owl Carousel 2.0.

Træk og slip-understøttelse er inkluderet for mere bekvem brug af pluginnet på mobile enheder.
Pluginnet er perfekt til at vise store billeder selv på små skærme på mobile enheder.

Eksempler | Hent

jQuery plugin Silver Track

Et ret lille, men funktionelt rigt jquery-plugin, der giver dig mulighed for at placere en skyder på en side - en karrusel, som har en lille kerne og ikke bruger mange webstedsressourcer. Pluginnet kan bruges til at vise lodrette og vandrette skydere, med animation og skabe sæt billeder fra galleriet.

Eksempler | Hent

AnoSlide – Ultrakompakt responsiv jQuery-skyder

Ultrakompakt jQuery-skyder - karrusel, hvis funktionalitet er meget større end en almindelig skyder. Disse inkluderer forhåndsvisning af et enkelt billede, visning af flere billeder i karrusel og titelbaseret skydervisning.

Eksempler | Hent

Uglekarrusel – Jquery-skyder – karrusel

Uglekarrusel er en skyder, der understøtter berøringsskærme og træk og slip-teknologi, let integreret i HTML-kode. Pluginnet er en af ​​de bedste skydere, der giver dig mulighed for at skabe smukke karruseller uden nogen specielt forberedt markup.

Eksempler | Hent

3D galleri - karrusel

Bruger 3D-overgange baseret på CSS-stile og lidt Javascript-kode.

Eksempler | Hent

3D-karrusel ved hjælp af TweenMax.js og jQuery

Storslået 3D karrusel. Det ser ud til, at dette stadig er en betaversion, for jeg opdagede et par problemer med den lige nu. Hvis du er interesseret i at teste og skabe dine egne skydere, vil denne karrusel være en stor hjælp.

Eksempler | Hent

Karrusel ved hjælp af bootstrap

Responsiv skyder - karrusel ved hjælp af bootstrap-teknologi kun til din nye hjemmeside.

Eksempler | Hent

Moving Box-karruselskyder baseret på Bootstrap-ramme

Mest populær på portefølje- og virksomhedswebsteder. Denne type skyder - karrusel - findes ofte på websteder af enhver type.

Eksempler | Hent

Lille Circleslider

Denne lille skyder er klar til at arbejde på enheder med enhver skærmopløsning. Skyderen kan fungere i både cirkulær og karruseltilstand. Lille cirkel præsenteres som et alternativ til andre skydere af denne type. Der er indbygget understøttelse af IOS og Android operativsystemer.

I cirkulær tilstand ser skyderen ret interessant ud. Fremragende understøttelse af træk og slip-metoden og et automatisk rulningssystem.

Eksempler | Hent

Thumbelina Content Slider

En kraftfuld, adaptiv, karruselskyder er perfekt til et moderne websted. Fungerer korrekt på enhver enhed. Har vandret og lodret tilstand. Dens størrelse er minimeret til kun 1 KB. Det ultrakompakte plugin har også fremragende jævne overgange.

Eksempler | Hent

Wow – skyder – karrusel

Indeholder mere end 50 effekter, som kan hjælpe dig med at skabe en original skyder til dit websted.

Eksempler | Hent

Responsiv jQuery-indholdsskyder bxSlider

Tilpas størrelsen på dit browservindue for at se, hvordan skyderen tilpasser sig. Bxslider kommer med mere end 50 tilpasningsmuligheder og viser dens funktioner med forskellige overgangseffekter.

Eksempler | Hent

jKarrusel

jCarousel er et jQuery-plugin, der hjælper med at organisere visningen af ​​dine billeder. Du kan nemt oprette brugerdefinerede billedkarruseller fra basen vist i eksemplet. Skyderen er adaptiv og optimeret til at arbejde på mobile platforme.

Eksempler | Hent

Scrollbox - jQuery plugin

Scrollbox er et kompakt plugin til at lave en skyder - en karrusel eller en tekstcrawl. Nøglefunktioner inkluderer lodrette og vandrette rulleeffekter med pause på musen over.

Eksempler | Hent

dbpasKarrusel

En simpel karruselskyder. Hvis du har brug for et hurtigt plugin, er dette 100% egnet. Leveres kun med de grundlæggende funktioner, der kræves for at skyderen kan fungere.

Eksempler | Hent

Flexisel: Responsive JQuery Slider Plugin - Karrusel

Skaberne af Flexisel blev inspireret af det gamle skole-plugin jCarousel, og lavede en kopi af det med henblik på korrekt betjening af skyderen på mobil- og tablet-enheder.

Flexisels responsive layout, når det kører på mobile enheder, er anderledes end et layout i browservinduestørrelse. Flexisel er perfekt tilpasset til at arbejde på skærme, både lav og høj opløsning.

Eksempler | Hent

Elastislide – adaptiv skyder – karrusel

Elastislide tilpasser sig perfekt til størrelsen på din enheds skærm. Du kan indstille det mindste antal billeder, der skal vises ved en bestemt opløsning. Fungerer godt som en karruselskyder med billedgallerier, ved hjælp af en fast indpakning sammen med en lodret rulleeffekt.

Eksempel | Hent

FlexSlider 2

Freeware skyder fra Woothemes. Det betragtes med rette som en af ​​de bedste adaptive skydere. Pluginnet indeholder flere skabeloner og vil være nyttigt for både nybegyndere og eksperter.

Eksempel | Hent

Fantastisk karrusel

Fantastisk karrusel – responsiv billedskyder ved hjælp af jQuery. Understøtter mange indholdsstyringssystemer såsom WordPress, Drupal og Joomla. Understøtter også Android og IOS og desktop-operativsystemer uden kompatibilitetsproblemer. Indbyggede fantastiske karruselskabeloner giver dig mulighed for at bruge skyderen i lodret, vandret og cirkulær tilstand.

Eksempler | Hent

Tiden står ikke stille og går med den. Dette påvirkede også internettet. Du kan allerede se, hvordan udseendet af hjemmesider ændrer sig, er særligt populært. Og i forbindelse hermed er der dukket en del nye adaptive jquery-skydere, gallerier, karruseller eller lignende plugins op.
1. Skyder for responsive vandrette indlæg

Adaptiv vandret karrusel med detaljerede installationsvejledninger. Den er lavet i en enkel stil, men du kan style den, så den passer til dig selv.

2. Skyder på Glide.js

Denne skyder passer til enhver hjemmeside. Den bruger open source Glide.js. Skyderfarverne kan nemt ændres.

3. Vippet indholdsdiasshow

Skyder til responsiv indhold. Højdepunktet på denne skyder er 3D-effekten af ​​billederne samt forskellige animationer af tilfældigt udseende.

4. Skyder ved hjælp af HTML5-lærred

En meget smuk og imponerende skyder med interaktive partikler. Det blev lavet ved hjælp af HTML5 lærred,

5. Skyder til billedforvandling

Skyder med en morphing-effekt (glat transformation fra et objekt til et andet). I dette eksempel er skyderen velegnet til porteføljen af ​​en webudvikler eller webstudie i form af en portefølje.

6. Cirkulær skyder

Skyder i form af en cirkel med effekten af ​​at vende billedet.

7. Skyder med sløret baggrund

Adaptiv skyder med skift og baggrundssløring.

8. Responsiv modeskyder

Enkel, let og responsiv hjemmesideskyder.

9. Slicebox - jQuery 3D billedskyder (OPDATERET)

Opdateret version af Slicebox-skyderen med rettelser og nye funktioner.

10.Gratis animeret responsivt billedgitter

JQuery-plugin til at skabe et fleksibelt billedgitter, der skifter billeder ved hjælp af forskellige animationer og timings. Dette kan se godt ud som baggrund eller dekorativt element på en hjemmeside, da vi selektivt kan fremvise nye billeder og deres overgange. Pluginnet kommer i flere versioner.

11.Fleksibel skyder

Et universelt gratis plugin til din hjemmeside. Dette plugin kommer i flere skyder- og karruselmuligheder.

12. Fotoramme

Fotorama er et universelt plugin. Den har mange indstillinger, alt fungerer hurtigt og nemt, og du kan se dias i fuld skærm. Skyderen kan bruges både i en fast størrelse og adaptiv, med eller uden thumbnails, med eller uden cirkulær rulning og meget mere.

P.S. Jeg installerede skyderen flere gange, og jeg synes, det er en af ​​de bedste

13. Gratis og adaptivt 3D-skydergalleri med thumbnails.

Eksperimentelt skydergalleri 3DPanelLayout med et gitter og interessante animationseffekter.

14. Skyder på css3

Den adaptive skyder er lavet ved hjælp af css3 med glat udseende af indhold og let animation.

15. WOW Slider

WOW Slider er en billedskyder med fantastiske visuelle effekter.

17. Elastik

Elastisk skyder med fuld reaktionsevne og dias-miniaturebilleder.

18. Slids

Dette er en fuldskærms-responsiv skyder, der bruger css3-animation. Skyderen er lavet i to versioner. Animationen er lavet ganske usædvanligt og smukt.

19. Adaptivt fotogalleri plus

En simpel gratis galleriskyder med billedindlæsning.

20. Responsive Slider til WordPress

Adaptiv gratis skyder til WP.

21. Parallax Content Slider

Skyder med parallakse effekt og kontrol af hvert element ved hjælp af CSS3.

22. Slider med musiklink

Skyder ved hjælp af JPlayer åben kildekode. Denne skyder ligner en præsentation med musik.

23. Slider med jmpress.js

Den responsive skyder er baseret på jmpress.js og vil derfor give dig mulighed for at tilføje nogle interessante 3D-effekter til dine slides.

24. Hurtigt svæv diasshow

Diasshow med hurtig diasskift. Slides kontakt på svæv.

25. Billedharmonika med CSS3

Billede harmonika ved hjælp af css3.

26. Et Touch Optimized Gallery Plugin

Dette er et responsivt galleri, der er optimeret til touch-enheder.

27. 3D Galleri

3D Wall Gallery - oprettet til Safari-browseren, hvor 3D-effekten vil være synlig. Hvis du ser på det i en anden browser, vil funktionaliteten være fin, men 3D-effekten vil ikke være synlig.

28. Skyder med paginering

Responsiv skyder med paginering ved hjælp af JQuery UI-skyder. Ideen er at bruge et simpelt navigationskoncept. Det er muligt at spole alle billeder tilbage eller skifte dias for dias.

29.Billedmontage med jQuery

Arranger automatisk billeder afhængigt af skærmens bredde. En meget nyttig ting, når du udvikler et porteføljewebsted.

30. 3D Galleri

En simpel 3D cirkulær skyder ved hjælp af css3 og jQuery.

31. Fuldskærmstilstand med 3D-effekt ved hjælp af css3 og jQuery

En skyder med mulighed for at se billeder i fuld skærm med en smuk overgang.

Vi har brug for en simpel skyder med automatisk rulning. Lad os komme igang...

Beskrivelse af, hvordan skyderen fungerer.

Sliderne vil blive linet op og vil rulle efter et vist stykke tid.

Den røde ramme viser den synlige del af skyderen.

I slutningen af ​​skyderen skal du duplikere det første dias. Dette er nødvendigt for at sikre scrolling fra det tredje slide til det første. Du skal også tilføje det sidste slide til begyndelsen for at kunne scrolle baglæns fra det første slide til det tredje. Nedenfor er vist, hvordan skyderen virker i fremadgående retning.

Når skyderen når slutningen, placeres en kopi af den fra begyndelsen af ​​skyderen øjeblikkeligt i stedet for det sidste dias. Så gentages cyklussen igen. Dette skaber illusionen af ​​en endeløs skyder.

HTML markup

Lad os først lave en simpel skyder med automatisk rulning. Det kræver to containere at fungere. Den første indstiller størrelsen på skyderens synlige område, og den anden er nødvendig for at placere skydere i den. Skyderlayoutet vil se sådan ud:

Slider styles .slider-box( width : 320px ; højde : 210px ; overflow : hidden ; ) .slider( position : relativ ; width : 10000px ; højde : 210px ; ) .slider index: 0 ; float index: 0 )

Container.slider-box angiver skyderens dimensioner. Ved at bruge egenskaben overflow:hidden skjules alle elementer, der ikke er inkluderet i området inde i elementet.

Container.slider er indstillet til en stor bredde. Dette er nødvendigt, så alle dias passer ind i linjen.

Slides justeres ved hjælp af float:left-egenskaben.

Nedenfor er et skematisk layout af skyderblokkene.

Manuskript

Bevægelsen af ​​objektglassene vil blive udført ved jævnt at ændre egenskaben margin-venstre for container.slider.

$(funktion () ( var width= $(".slider-box" ) .width () ; // Slider width. interval = 4000 ; // Slide change interval. $(".slider img:last" ) .clone () .prependTo (".slider" ); // En kopi af det sidste slide placeres i begyndelsen $() .eq (1 ) .clone ().appendTo ( "slider" ); flyttes til venstre med bredden af ​​et dias setInterval("animation()" , interval) ; // Animation()-funktionen startes for at ændre dias. function animation() ( var margin = parseInt($(".slider") .css ("marginLeft") ); // Aktuel blok offset.slider width= $(".slider-box" ) .width () , / / SkyderbreddeAmount= $(".skyder" ) .children ().length ; // Antal dias i skyderen if (margin!= (- width* (slidersAmount- 1 ) ) // Hvis den aktuelle. dias er ikke det sidste , ( margin= margin-width; // så reduceres marginværdien med diasets bredde. ) else ( // Hvis det sidste dias vises, $(".slider" ) . css ("margin-left" , - width) ; // derefter vender blok.skyderen tilbage til sin oprindelige position, margin=- width* 2 ) $(".slider") .animate (( marginLeft: margin) , 1000 ) ; // Block.slider er flyttet til venstre med 1 slide ) ;

Resultatet var en simpel skyder med endeløs automatisk rulning.