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
{% component 'swiperGallery' %}
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.