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..
Settings used for this example:
Component Inspector
Media Folder | budapest |
Transition Effect | Fade |
Page HTML
<div style="width: 100%; height: calc(100vh - 70px);">
{% component 'swiperGallery' %}
</div>
Explanation: We set the folder of images that we wish to display and set the transition type to "Slide". 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 (inline styles are frowned upon but this is a demo!). Note that for android devices you may want to add some additional logic to deal with the ever-appearing-disappearing address bar.
Settings used for this example:
Component Inspector
Media Folder | budapest |
Transition Effect | Swipe |
Direction | Vertical |
Add navigation? | Unchecked |
Page HTML
<div style="width: 1008px; height: 630px; margin: 0 auto;">
{% component 'swiperGallery2' %}
</div>
Explanation: We set the folder of images that we wish to display and set the transition type to "Swipe", and the direction to "Vertical", and we hide the navigation arrows. We set the container DIV to have a specific width and height (inline styles are frowned upon but this is a demo!).
Settings used for this example:
Component Inspector
Media Folder | budapest |
Transition Effect | Cube |
Transition Speed | 2000 |
Page HTML
<div id="swiper-cube-demo" style="width: 504px; height: 315px; margin: 0 auto; margin-bottom: 70px;">
{% put styles %}
<style>
#swiper-cube-demo .swiper-pagination {
position: relative;
top: 20px;
}
#swiper-cube-demo .swiper-pagination-bullet-active {
background-color: red;
}
</style>
{% endput %}
{% component 'swiperGallery3' %}
</div>
Explanation: We set the folder of images that we wish to display and set the transition type to "Cube". The cube animation effect is very resource-intensive, so we make the gallery size small and set the transition duration to 3 seconds. We add some CSS to pull the navigator component down below the slides, and set the active bullet to be red.
Settings used for this example:
Component Inspector
Media Folder | budapest |
Transition Effect | Coverflow |
Transition Speed | 2000 |
Lazy-load images? | Not checked |
Add pagination? | Not checked |
Add navigation? | Not checked |
Auto-play? | Checked |
Auto-play Delay | 3000 |
Additional Swiper Options | coverflowEffect: {rotate: 50, stretch: 0, depth: 100, modifier: 1, slideShadows : true,}, centeredSlides: true, slidesPerView: 'auto' |
Page HTML
<div id="swiper-coverflow-demo" style="width: 100%; height: 315px;">
{% put styles %}
<style>
#swiper-coverflow-demo .swiper-container {
width: 100%;
padding-top: 50px;
padding-bottom: 50px;
}
#swiper-coverflow-demo .swiper-slide {
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
width: 300px;
height: 300px;
}
</style>
{% endput %}
{% component 'swiperGallery4' %}
</div>
Explanation: We set the folder of images that we wish to display and set the transition type to "Coverflow". This animation effect is very resource-intensive, so we make the gallery size small and set the transition duration to 2 seconds. We add some CSS as well as some custom options, which were taken from the swiper with source code for "Coverflow".
Settings used for this example:
Component Inspector
Media Folder | budapest |
Transition Effect | Flip |
Direction | Vertical |
Add navigation? | Unchecked |
Page HTML
<div style="width: 1008px; height: 630px; margin: 0 auto;">
{% component 'swiperGallery2' %}
</div>
Explanation: We set the folder of images that we wish to display and set the transition type to "Flip". We set the container DIV to fill its parent horizontally.
All Available Component Inspector Options for Swiper Galleries
Code | OctoberCMS Component Inspector Property | Description |
---|---|---|
alias | Alias | Standard OctoberCMS stuff, you refer to the component in your page via this unique identifier, the default is “embeddedGallery” but you can change it to anything you want (don’t use spaces or special characters though!) |
mediaFolder | Media Folder | Select the folder that you uploaded the images to in the OctoberCMS Media manager. Only folders under the “Base Media Folder” set on the November Gallery settings page are valid. |
maxItems | Max Images | The maximum number of images to display |
sortBy | Order by | Order to display the gallery items in; note: Image Title, Description, and Sort Order only work for images uploaded using the Galleries page! Options are: (1) title / Image Title (2) description / Image Description (3) sortOrder / Image Order in Gallery (4) width / Image Width (5) height / Image Height (6) orientation / Image Orientation (7) fileName / Filename (8) fileSize / File Size (9) uploaded / Date/Time Uploaded; and all options are also available in reverse order (append DESC onto the option code). |
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) |
Script options applicable to all "Swiper" galleries...
The swiper script has a plethora of available options, only a few of them can be set using the component inspector as shown in the table below. For all available options, see The Swiper Official API Docs.
Script Parameter | OctoberCMS Component Inspector Property | Type | Default | Description |
---|---|---|---|---|
effect | "Swipe Effect" | number | 300 | Duration of transition between slides (in ms) |
direction | "Direction" | string | 'horizontal' | Could be 'horizontal' or 'vertical' (for vertical slider). |
speed | "Transition Speed" | number | 300 | Duration of transition between slides (in ms) |
lazy | "Lazy-load images?" | object/boolean | Enables images lazy loading. Object with lazy loading parameters or boolean true to enable with default settings. For example:
See the original docs!
|
|
pagination | "Lazy-load images?" | object/boolean | Object with pagination parameters. For example:
See the original docs!
|
|
navigation | "Add navigation?" | object/boolean | Object with navigation parameters. For example:
See the original docs!
|
|
autoplay | "Auto-play?" and "Auto-play Delay" | object/boolean | Object with autoplay parameters or boolean true to enable with default settings. For example:
See the original docs!
|