Hero Product Swiper

Description

The Hero Product Swiper shows the user attractively and cleanly the products, categories, or applications he/she can deep dive into.

The user can swipe through the different teasers and choose the topic he/she is interested in.

The Hero Product Swiper is similar to the Swiper Slider component but spans over the whole width of the page ("hero") and features animation effects when sliding.

In most viewports, a prominent center slide with at least two neighboured, less prominent slides will be shown. Only on smaller mobile devices, one slide is visible. 

Usage

  • The Hero Product Swiper is mainly placed on the homepage (startpage), overview pages or on campaign pages
  • It must not be nested inside other components (like the Base Layout Component, Content Layout Container, Column Control, Swiper Slider)

Demonstration (see below)

Evaporator

Anwendungen für die AxiBlade Baureihe

Da Kälte­anlagen im Dauer­betrieb laufen, können Betreiber mit den energie­effizienten AxiBlades viel Geld sparen. Zudem sind sie sehr leise, wodurch die Belastung für das Personal deutlich geringer ist.

Mehr erfahren

Verflüssiger

Verflüssiger

Die höhere Leistungs­dichte der AxiBlade Ventilatoren kann wahlweise dazu genutzt werden, die Verflüssiger effizienter und leiser zu machen oder mehr Luft­leistung zur Verfügung zu stellen.

Mehr erfahren

Kuehlturm

Kühlturm

Für Kühltürme, die in Misch- oder Stadt­gebieten stehen, ist der leise Betrieb der Axial­ventilatoren wichtig, aber auch die Zu­ver­lässig­keit sowie die stufen­lose Dreh­zahl­regelung.

Mehr erfahren

Prozesskaelteanlagen

Prozess­kälte­anlagen

Im Produktions­prozess sind Ventilatoren oft speziellen Bedingungen wie Schmutz, Wärme oder Vibration ausgesetzt. AxiBlades lassen sich optimal anpassen, arbeiten leise und zuverlässig.

Mehr erfahren

Adiabatische Kuehlung

Adiabatische Kühlung

Da der Luftstrom vor dem Wärme­tauscher mit Wasser gekühlt wird, müssen die Ventilatoren hohe Luft­feuchtig­keit ver­tragen können. Zudem sollen sie effizient und präzise steuer­bar sein.

Mehr erfahren

Waermepumpen

Wärmepumpe

Bei Wärme­pumpen sind effiziente und leise Lösungen gefragt, deren Leistung sich an die tat­sächlichen Ge­geben­heiten anpassen lässt. All das be­herrscht der AxiBlade aufs Beste.

Mehr erfahren

Waermepumpen

Fortluft FanGrid

Für die kontrollierte Abluft in Rechen­zentren kommen leistungs­starke, energie­effiziente und leise Axial­ventilatoren zum Einsatz. Auch hier heißt die Lösung: AxiBlade.

Mehr erfahren
Evaporator

Anwendungen für die AxiBlade Baureihe

Da Kälte­anlagen im Dauer­betrieb laufen, können Betreiber mit den energie­effizienten AxiBlades viel Geld sparen. Zudem sind sie sehr leise, wodurch die Belastung für das Personal deutlich geringer ist.

Mehr erfahren

Verflüssiger

Verflüssiger

Die höhere Leistungs­dichte der AxiBlade Ventilatoren kann wahlweise dazu genutzt werden, die Verflüssiger effizienter und leiser zu machen oder mehr Luft­leistung zur Verfügung zu stellen.

Mehr erfahren

Kuehlturm

Kühlturm

Für Kühltürme, die in Misch- oder Stadt­gebieten stehen, ist der leise Betrieb der Axial­ventilatoren wichtig, aber auch die Zu­ver­lässig­keit sowie die stufen­lose Dreh­zahl­regelung.

Mehr erfahren

Prozesskaelteanlagen

Prozess­kälte­anlagen

Im Produktions­prozess sind Ventilatoren oft speziellen Bedingungen wie Schmutz, Wärme oder Vibration ausgesetzt. AxiBlades lassen sich optimal anpassen, arbeiten leise und zuverlässig.

Mehr erfahren

Adiabatische Kuehlung

Adiabatische Kühlung

Da der Luftstrom vor dem Wärme­tauscher mit Wasser gekühlt wird, müssen die Ventilatoren hohe Luft­feuchtig­keit ver­tragen können. Zudem sollen sie effizient und präzise steuer­bar sein.

Mehr erfahren

Waermepumpen

Wärmepumpe

Bei Wärme­pumpen sind effiziente und leise Lösungen gefragt, deren Leistung sich an die tat­sächlichen Ge­geben­heiten anpassen lässt. All das be­herrscht der AxiBlade aufs Beste.

Mehr erfahren

Waermepumpen

Fortluft FanGrid

Für die kontrollierte Abluft in Rechen­zentren kommen leistungs­starke, energie­effiziente und leise Axial­ventilatoren zum Einsatz. Auch hier heißt die Lösung: AxiBlade.

Mehr erfahren
Evaporator

Anwendungen für die AxiBlade Baureihe

Da Kälte­anlagen im Dauer­betrieb laufen, können Betreiber mit den energie­effizienten AxiBlades viel Geld sparen. Zudem sind sie sehr leise, wodurch die Belastung für das Personal deutlich geringer ist.

Mehr erfahren

Verflüssiger

Verflüssiger

Die höhere Leistungs­dichte der AxiBlade Ventilatoren kann wahlweise dazu genutzt werden, die Verflüssiger effizienter und leiser zu machen oder mehr Luft­leistung zur Verfügung zu stellen.

Mehr erfahren

Kuehlturm

Kühlturm

Für Kühltürme, die in Misch- oder Stadt­gebieten stehen, ist der leise Betrieb der Axial­ventilatoren wichtig, aber auch die Zu­ver­lässig­keit sowie die stufen­lose Dreh­zahl­regelung.

Mehr erfahren

Prozesskaelteanlagen

Prozess­kälte­anlagen

Im Produktions­prozess sind Ventilatoren oft speziellen Bedingungen wie Schmutz, Wärme oder Vibration ausgesetzt. AxiBlades lassen sich optimal anpassen, arbeiten leise und zuverlässig.

Mehr erfahren

Adiabatische Kuehlung

Adiabatische Kühlung

Da der Luftstrom vor dem Wärme­tauscher mit Wasser gekühlt wird, müssen die Ventilatoren hohe Luft­feuchtig­keit ver­tragen können. Zudem sollen sie effizient und präzise steuer­bar sein.

Mehr erfahren

Waermepumpen

Wärmepumpe

Bei Wärme­pumpen sind effiziente und leise Lösungen gefragt, deren Leistung sich an die tat­sächlichen Ge­geben­heiten anpassen lässt. All das be­herrscht der AxiBlade aufs Beste.

Mehr erfahren

Waermepumpen

Fortluft FanGrid

Für die kontrollierte Abluft in Rechen­zentren kommen leistungs­starke, energie­effiziente und leise Axial­ventilatoren zum Einsatz. Auch hier heißt die Lösung: AxiBlade.

Mehr erfahren

How to set up a Hero Product Swiper

Image of a modal with empty input field for setting up a Hero Product Swiper's Product Info Section Headline
  • When "Hero Product Swiper" component is positioned straight into the "Layout Container", a doubleclick (or the wrench looking "Configure" tool of the component's toolbar) will open the first tab of the setup modal, the "Product Info", where background-color and section headlines are set for the complete section
Image of a modal for setting up a Hero Product Swiper's Section Headline
  • Once you click inside the text input field for the "Section Headline" the formatting tools for the WYSIWYG editor become visible
  • For the next setting "Background Type" you have the options to choose between "Background Image" (just drop an asset in the designated "drop space" below) or "Background Color" (just pick a color of the color-picker below)
Image of a modal for setting up a Hero Product Swiper's Product Infos
  • The "White Text" and "Dark Background" checkboxes (see image left) only appear when "Background Type" "Background Image" has been selected
  • Depending on the previously selected image you can choose to use "White Text" color with the provided checkbox which can also be appropriate  when selecting the next checkbox option "Dark Background"
  • The "Dark Background" checkbox option is an opportunity to produce more contrast between text and background (with darkening a previously selected "Background Image")
Image of a modal for adding a Hero Product Swiper's Swiper Info
  • The second tab of the modal "Swiper Entry" provides setup options for each of at least three slides of the swipable carousel 
  • You can not insert a "Hero Product Swiper" without having added 3 slides
  • By pressing the "Add" button the first of all slides will get added

 

Image of a modal for setting up a Hero Product Swiper's Swiper Entry

❶ Each slide can be provided with a slide headline

❷ A "Swiper Image" should be added to each slide as it is a "Hero Product Swiper" (although it's not necessary) , either by clicking through the file system …

❸ … or by drag-n-dropping an asset from AEM's asset side panel

❹ Text can be added as usual. The formatting tools will appear after clicking in the text area


❺ A detached Link with "Linktext" and  …

❻ … corresponding "Linkpath" can also be added

❼ "Add" another swiper slide by pressing the button (remember, you'll need at least 3 slides)

Image of a modal detail with some special options
  • It's always possible to delete certain slides with the trash can icon next to the "Swiper Headline"
  • You'll also be able to shift slides. Therefore collapse all slide properties by clicking each chevron (Collapse/Expand tool) at all concerning slides

 

  • "Grab" (pressed left mouse button) the slide and move it up or down to the desired position