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
- 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.