Billedkarrusel

En række statiske billeder spiser plads og beder besøgende om at rulle forbi hver eneste. En karrusel viser det samme sæt i en kompakt, swipebar skyder, som folk rent faktisk rører ved. Den Billedkarrusel widget i Master Addons til Elementor bygger den skyder fra et normalt WordPress-galleri og tilføjer derefter automatisk afspilning, en lysboks, flere navigationsstile og en coverflow-tilstand, alt sammen fra Elementor-panelet.

Du vælger billederne, vælger hvor mange der vises på én gang, og bestemmer hvordan besøgende bevæger sig imellem dem. Ingen kortkoder, ingen separat skyder plugin. Denne guide går gennem hver indstilling i widgetten, fra at indlæse galleriet til at style pilene. For demoer og en sammenligning med Elementors egen karrusel, se den Elementor billedkarrusel widget page.

Foretrækker du at se først? Denne korte tutorial dækker Billedkarrusellen fra galleri til styling:

Hvad Image Carousel widget gør #

Widgetten forvandler et udvalg af billeder til en glidende karrusel. Det viser et eller flere billeder pr. visning, går videre alene eller ved klik og åbner hvert billede i en lightbox for et look i fuld størrelse. Billedtekster, kanter, overlejringer og pilstyling er alle indbygget.

Den kører på Swiper-motoren, så skyderen er berøringsvenlig og responsiv fra starten. På en telefon flyder den samme karrusel tilbage til færre kolonner, og du kan skjule pilene på mobilen, hvis de kommer i vejen.

Før du starter #

• WordPress med Elementor installeret og aktiv.
• Master Addons til Elementor installeret og aktiv. Ny i plugin'et? Se den installationsvejledning.
• En håndfuld billeder uploadet til dit mediebibliotek eller klar til upload.

Sådan tilføjes Image Carousel-widget #

I Elementor-editoren skal du åbne Elementer panel og søg efter Billedkarrusel, eller rul til afsnittet Mastertilføjelser. Træk widgetten over på din side. Den indlæses tom, indtil du tilføjer billeder, så galleriet altid er det første trin.

Tilføj og bestil dine billeder #

I Content fane, åbn Images sektion og klik på gallerifeltet for at starte WordPress medievælger. Vælg de billeder, du ønsker, og brug derefter Rediger galleri for at trække dem i rækkefølge, skal du tilføje billedtekster eller slippe nogen med X-ikonet.

Tilbage i panelet giver sektionen Billeder dig yderligere tre kontrolelementer:

• Billedopløsning: vælg den størrelse WordPress serverer, fra miniaturebillede op til fuld, eller indstil en brugerdefineret størrelse. Medium eller Large holder siden lys, mens den stadig ser skarp ud i skyderen.
• Aktiver Lightbox Gallery: slå dette til, så besøgende kan klikke på et billede for at åbne det i fuld størrelse i en popup. Med det slukket vises billederne kun.
• Lightbox bibliotek: vælg popup-motoren, enten Fancybox eller Elementors egen lightbox. Begge grupperer karruselbillederne, så besøgende kan træde igennem dem inde i popup'en.

Opsæt navigation #

The Navigation sektion styrer, hvordan folk bevæger sig gennem diasene. Start med Navigation dropdown, som indstiller kontrolstilen: Pile og prikker, pile og brøk, pile, prikker, fremskridt eller ingen.

• Vis rullepanel: tilføjer en trækbar statuslinje under skyderen.
• Pile Position: placer pilene Top, Center eller Bottom, og venstre, center eller højre inden for det.
• Placering: indstil pilene Inde i skyderen eller Uden for den.
• Skjul pil på mobil: slip pilene på små skærme, hvor swiping er den naturlige gestus.
• Næste ikon og forrige ikon: skift standardpilene for et hvilket som helst ikon fra Elementor-ikonbiblioteket.

Afstem karrusellens adfærd #

The Karruselindstillinger sektion er, hvor skyderen får sin bevægelse. Dette er den del, der bestemmer, hvor mange billeder der vises, hvor hurtigt de bevæger sig, og om skyderen sløjfer.

• Slides pr. Kolonne: antallet af rækker, når du kører skyderen i lodret retning.
• Layout: vælg Karrusel til en standard flad skyder eller Coverflow for en 3D-effekt.
• Auto Højde: lad skyderhøjden tilpasse sig det aktuelle billede.
• Autoplay og Autoplay Hastighed: tænd automatisk glidning og indstil forsinkelsen mellem dias i millisekunder (5000 er fem sekunder).
• Pause på Hover: stop automatisk afspilning, mens markøren er over skyderen.
• Slides til Scroll: hvor mange billeder går videre pr. trin.
• Center Slide, Grib markør, Træk fri tilstand: indstillinger for centrering af den aktive slide, visning af en grab-markør og fritflydende trækrulning.
• Sløjfe: kør karrusellen som en endeløs løkke i stedet for at stoppe ved det sidste billede.

Brug Coverflow-layoutet til en 3D-effekt #

Switch Layout til Coverflow og diasene vipper ind i en 3D-stak, med det aktive billede fladt i midten og naboerne vinklet tilbage. A Coverflow Effekt kontrol vises, så du kan finjustere dybden og rotationen. Det passer til fotografering og porteføljesektioner, hvor selve skyderen er en del af designet.

Style karrusellen #

The Style faneblad opdeles i fire sektioner: Karruselgenstande, Lightbox, Navigation, og Mønstre. Sammen dækker de udseendet af diasene, popup'en og pilene.

Karruselgenstande #

Dette afsnit styler billeddiasene. Det har Normal-, Hover- og Aktiv-tilstande, så du kan få det centrerede dias til at skille sig ud fra resten.

• Baggrund, Border Type, Border Radius, Box Shadow: standardindramning for hvert dias. Border Radius runder billedhjørnerne.
• Polstring og Vare Gap: plads inde i hver slide og mellemrummet mellem slides.
• Skyggetilstand og opacitet: ekstra dybde og gennemsigtighed for de inaktive slides.

Lightbox, overlay og billedtekster #

The Lightbox sektionen styler forhåndsvisningsikonet, der sidder på hvert billede, og overlejringen bag det, plus billedtekstteksten.

• Brugerdefineret forhåndsvisningsikon: erstat standardzoomikonet, og indstil dets farve, svævefarve, størrelse og position med Icon Gap til venstre og øverst.
• Overlejring: tilføj en baggrundsfarve over billedet, som hjælper, når du vil have ikonet og billedteksten til at forblive læsbar.
• Billedteksttitel: typografi, baggrund, farve og svævefarve for de billedtekster, du har tilføjet i galleriet.

Navigationspile #

The Navigation stilsektion styrer pilenes udseende med Normal- og Hover-tilstande.

• Farve og baggrund: pilikonfarve og knappen bag den.
• Border Type, Border Radius, Polstring, Størrelse: form og størrelse pileknapperne, herunder runde knapper med fuld radius.
• Box Shadow og Offset: tilføj dybde og skub pilene ind eller ud med den vandrette forskydning.

Resultatet på siden #

Publicer eller forhåndsvisning, og karrusellen kører live: den autoplays gennem billederne, loops, hvis du tændte det, og åbner hver enkelt i lysboksen ved klik. Din styling bærer igennem, fra afrundede kantede slides til de brugerdefinerede pileknapper.

Almindelige brugstilfælde #

• Fotografering og portfolio gallerier, hvor lysboksen lader besøgende se billeder i fuld størrelse.
• Produktbilledskydere på en landingsside, med autospil, der trækker øjet.
• Logo- eller partnerstrimler brug af flere dias pr. visning og en løkke.
• Testimonial eller begivenhed fotos i en kompakt, swipebar blok.
• Hero coverflow skydere til en design-forward sektion.

Tips til at arbejde med Billedkarrusellen #

• Match billedopløsning til slidestørrelsen. Servering af filer i fuld størrelse i små dias gør siden langsommere; Medium eller Large er normalt rigeligt.
• Hold autoplay-hastigheden behagelig. Omkring 4000 til 6000 ms giver folk tid til at kigge uden at føle sig forhastet.
• Slå Pause til Svæve med autospil. Det stopper skyderen med at glide ud under en, der læser en billedtekst.
• Skjul pile på mobilen. Swiping er den naturlige gestus på touchskærme, så pilene er ofte bare rod der.
• Brug tilstanden Aktiv til at markere midterdiasset. En subtil kant eller fuld opacitet på det aktive objektglas styrer øjet.

Ofte stillede spørgsmål #

Indpakning #

The Billede Karrusel widget bygger en Elementor-billedskyder med alle funktioner uden et separat plugin: indlæs et galleri, indstil automatisk afspilning og sløjfe, tænd for lysboksen, og stil dias og pile, så de passer til dit design. For andre måder at vise billeder på, se på Galleri Slider og Filtrerbart Galleri widgets. Gennemse hele Master Addons widgets og udvidelser for at se hvad der ellers er inkluderet.