Carousel-komponent

Med Core Component Carousel Component kan innehållsförfattaren presentera innehållet i en navigerbar karusell.

Användning

Med hjälp av Carousel Component kan innehållsförfattaren ordna innehållet i en roterande karusell med bilder.

The redigeringsdialogruta gör att innehållsförfattaren kan skapa, namnge och ordna flera bilder samt aktivera automatisk övergång med fördröjning. Använda designdialogrutakan mallskaparen definiera vilka komponenter som kan läggas till i karusellen, aktivera eller inaktivera automatiska övergångar och anpassa formaten.

Version och kompatibilitet

Den aktuella versionen av Carousel Component är v1, som introducerades i version 2.2.0 av Core Components i oktober 2018, och som beskrivs i det här dokumentet.

Följande tabell visar alla versioner av komponenten som stöds, de AEM versionerna som komponenterna är kompatibla med och länkar till dokumentation för tidigare versioner.

Mer information om versioner och versioner av kärnkomponenter finns i dokumentet Huvudkomponentversioner.

Exempel på komponentutdata

Om du vill se exempel på Carousel-komponenten och dess konfigurationsalternativ samt HTML och JSON-utdata går du till Komponentbibliotek.

Teknisk information

Den senaste tekniska dokumentationen om Carousel-komponenten finns på GitHub.

Mer information om hur du utvecklar kärnkomponenter finns i Dokumentation för grundkomponentutvecklare.

Djuplänkning till en panel

Carousel, Tabbar, och Dragspelskomponenter har stöd för att länka direkt till en panel i komponenten.

Så här gör du:

1. Visa sidan med komponenten med hjälp av Visa som publicerad i sidredigeraren.
2. Inspect innehållet på sidan och identifierar panelens ID.
   • Till exempel id="carousel-bfe4fa6647-item-47f1a7ca67-tabpanel"
3. ID:t blir det ankare som du kan lägga till i URL:en med ett hash-tecken (#).
   • Till exempel https://wknd.site/content/wknd/language-masters/en/magazine/western-australia.html#carousel-bfe4fa6647-item-47f1a7ca67-tabpanel

Om du navigerar till URL-adressen med panel-ID som ankarpunkt, rullar webbläsaren direkt till den aktuella komponenten och visar den angivna panelen. Om panelen inte är konfigurerad att visas som standard rullas den automatiskt.

Dialogrutan Redigera

I redigeringsdialogrutan kan innehållsförfattaren lägga till, byta namn på och ordna om bilder samt definiera inställningarna för automatisk övergång.

Fliken Objekt

Använd Lägg till för att öppna komponentväljaren och välja vilken komponent som ska läggas till som en tabb. När du har lagt till en post läggs den till i listan, som innehåller följande kolumner:

• Ikon - Ikonen för flikens komponenttyp, vilket gör det enkelt att identifiera i listan. För musen över för att se det fullständiga komponentnamnet som ett verktygstips.
• Beskrivning - Beskrivningen som används som tabbtext och används som standard för namnet på komponenten som är markerad för tabben.
• Ta bort - Tryck eller klicka för att ta bort fliken från flikkomponenten.
• Ändra ordning - Tryck eller klicka och dra för att ordna tabbarna.

Fliken Egenskaper

På Egenskaper kan författaren ställa in att bildrutorna ska övergå automatiskt.

• Aktivt objekt - Innehållsförfattaren kan definiera vilken flik som är aktiv när sidan läses in.
• Överför bilder automatiskt - När komponenten är aktiv flyttas den automatiskt till nästa bild efter en angiven fördröjning.
• Övergångsfördröjning - När Överför bildrutor automatiskt är markerat används det här värdet för att definiera fördröjningen mellan övergångar (i millisekunder).
• Inaktivera automatisk paus vid hovring - När Överför bilder automatiskt när du väljer det här alternativet pausas karusellövergången automatiskt när pekaren förs över karusellen. Välj det här alternativet så att övergången inte pausas.
• ID - Med det här alternativet kan du styra den unika identifieraren för komponenten i HTML och i Datalager.
  • Om inget anges genereras ett unikt ID automatiskt åt dig och du hittar det genom att granska den resulterande sidan.
  • Om ett ID anges är det författarens ansvar att se till att det är unikt.
  • Om du ändrar ID:t kan det påverka spårningen av CSS, JS och datalager.

Fliken Tillgänglighet

På Tillgänglighet -tabb kan värden anges för Tillgänglighet för ARIA -etiketter för komponenten.

• Etikett - Värdet på ett ariemärkningsattribut för karusellen, som beskriver karusellens innehåll
• Föregående - Värdet på ett aria-label-attribut för Carousel-navigeringens föregående knappetikett
• Nästa - Värdet på ett aria-label-attribut för Carousel-navigeringens nästa knappetikett
• Spela upp - Värdet på ett aria-label-attribut för Carousel-navigeringens play-knappetikett
• Pausa - Värdet på ett aria-label-attribut för karusellnavigeringens pause-knappetikett
• Tablist - Värdet på ett aria-label-attribut för Carousel-navigeringens lista över punktetiketter
• Ange objektets aria-etikett till dess titel - Om det här alternativet är markerat får karusellobjektets rubrik automatiskt sin ariaetikettbeskrivning.

Välj panel

Innehållsförfattaren kan använda Välj panel i komponentverktygsfältet för att byta till en annan bildruta för redigering samt för att enkelt ordna om bildrutorna.

När du har valt Välj panel i komponentverktygsfältet visas de konfigurerade bildrutorna som en listruta.

• Listan ordnas efter bildrutornas tilldelade placering och återspeglas i numreringen.
• Bildrutans komponenttyp visas först, följt av bildbeskrivningen med ett ljusare teckensnitt.

• Om du trycker eller klickar på en post i listrutan växlar vyn i redigeraren till den bildrutan.
• Du kan ordna om bilden på plats med hjälp av draghandtagen.

Designdialogruta

I designdialogrutan kan mallskaparen definiera vilka komponenter som kan läggas till som bilder i karusellkomponenten samt definiera standardvärden för automatisk övergång och vilka anpassade format som är tillgängliga för innehållsförfattaren.

Fliken Egenskaper

The Egenskaper -fliken används för att definiera standardinställningarna för bildruteövergångarna när en innehållsförfattare lägger till Carousel-komponenten på en sida.

• Överför bilder automatiskt - Anger om alternativet att automatiskt flytta karusellen till nästa bild ska aktiveras som standard när innehållsförfattaren lägger till karusellkomponenten på en sida.
• Lägga till kontrollelement - När detta är markerat placeras kontrollelementen framför karusellobjekten för att förbättra tillgängligheten.

Fliken Tillåtna komponenter

The Tillåtna komponenter -fliken används för att definiera vilka komponenter som innehållsförfattaren kan lägga till som bildrutor till Carousel-komponenten.

Fliken Tillåtna komponenter fungerar på samma sätt som fliken med samma namn när definiera policyn och egenskaperna för en layoutbehållare i mallredigeraren.

Fliken Format

Carousel-komponenten stöder AEM Formatsystem.

Adobe-klientdatalager

Carousel-komponenten stöder Adobe Client Data Layer.

Resurser för Business.Adobe.com