Component 2: Swiper
Use this component to create a modern, responsive “swiper” that can be controlled easily from any device. Note that you can control any of the galleries by touch (or click-and-swipe using a mouse). Various transitions are available: “fade”, “slide”, “flip”, “cube”, etc…
[Component Inspector Options]
The following are available in addition to the Shared Options described above:
| Property | Inspector Name | Description |
|---|---|---|
effect |
Transition Effect | Tranisition effect. Can be “slide”, “fade”, “cube”, “coverflow” or “flip” |
direction |
Direction | Can be “horizontal” or “vertical” |
speed |
Transition Speed | How long the transition effect lasts, in milliseconds. 1000 = 1 seconds. |
lazyLoad |
Lazy-load images? | Toggle ON to only load the images the user is looking at. Previous and next images are set to pre-load automatically. |
addPagination |
Add pagination? | Toggle ON to show bullets (or anything else) that enable to user to jump to any specific slide. |
addNavigation |
Add navigation? | Toggle ON to show previous-slide and next-slide navigational arrows. |
autoplay |
Auto-play? | Toggle ON to enable automatic advance on the slides. Set the delay below. |
autoplayDelay |
Auto-play Delay | How long each image is shown for, in milliseconds. 1000 = 1 seconds. |
additionalGalleryOptions |
Script options | Additional JS options that you want passed onto the Swiper script, for example: fadeEffect: {crossFade: true}
|
useDescriptionAsCSS |
Description is Style | When “on” and the image description contains one or more colons, then the image description is injected as CSS for that image. If the image description does not contain a colon, it is injected as a CSS class. Note that this only works for images uploaded through the backend Gallery page. |
mediaQuery |
Media Query | Use in conjunction with "Description is Style". You can set a media query to only apply the style in certain circumstances. Do not include a trailing “{”. For example: @media screen and (max-width: 766px) and (orientation: portrait)
|
Example Page
<div style="width: 100%; height: calc(100vh - 70px);">
{% component 'swiperGallery' %}
</div>The swiper component by default fills whatever space it is in, in this case we set the container DIV to take up 100% of the viewport and be 100vh tall.
For examples on how to customize the gallery, see How to Customize your Gallery.
Check out the Demo Site for live examples of the above.
No Comments