Swiper

Description


The "Swiper" component basically is a kind of slideshow where the slides may be swiped, dragged, clicked manually, or run automatically by time control. Because a slideshow may be looped and seamlessly continue with the first slide, it is often also called a carousel. Slideshows allow multiple pieces of content to occupy a single, coveted space. One element always takes center stage. Since it can hold more content than can be seen, the "Swiper" is ideal for instance for large picture galleries where space is limited.

 

Usage


3 superimposed screenshots of slideshows, each with differently positioned navigation buttons
  • The "Swiper" is unsuitable for important content. Content that is not immediately visible is often not noticed at all.
  • Visitors usually do not feel like using the element.
  • A "Swiper" may stand alone in the center or neighboring text, but always within columns. "Swiper" components should always be placed into "Column controls"! The maximum column width must not exceed 8 columns. (see "Column control").
    Take a "Hero Product Swiper" for covering the full viewport width
  • There are three options for positioning the arrow navigation button (see left):
    • In case of an image -"Swiper" use the "Overlap arrow" option (centered screenshot)
    • The outside placed arrows are necessary by the use of text that reaches the limits of one slide (bottom screenshot)
    • Try to avoid using the "Place arrow inside" option for the arrow buttons
  • When using a textbased "Swiper", do not place the "Swiper" to a neighboring column because of the outside placed arrow button
  • When installing an image based "Swiper" select pictures with the same aspect ratio, as the "Swiper" will always adopt the height of the highest image

Demonstration of an image-"Swiper"  ...

 

... in 6:6 column. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.

Demonstration of an image-"Swiper"  with lightbox ...

 

... in 6:6 column. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.

Demonstration of an image-"Swiper"  ...

 

... in 8:4 column. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.

Demonstration of an image-Swiper …

… in 8 columns (centered)

Demonstration of a text-based Swiper …

… in 8 columns (centered)

How to set up a Swiper

Image of a modal for setting up Swiper's items
  • When the "Swiper" component is positioned straight into the "Content 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 "Items", where each slide of the slideshow is appended by clicking the "Add" button
  • You may select an appropriate component that should contain the content of each slide
Image of a modal for setting up a Swiper's Items list
  • It is always possible to delete certain slides with the trash can icon next to the "Item"
  • You will also be able to shift slides. (The Collapse/Expand tool is not helpful as helpful as at the "Hero Product Swiper")

 

Image of a modal for setting up Swiper's Navigation Button Positioning properties
  • In the "Properties" section of the modal you will define the positioning of the arrow buttons to navigate within the slideshow (see Usage section above)
Image of  a black toolbar for AEM's Swiper component
  • There is also an easier way to rearrange the order of the slides:
    just click the "Select panel" tool (2nd tool of the "Swiper" component toolbar) of the already positioned component.