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

  Settings used for this example:

Component Inspector

Media Folderbudapest
Transition EffectFade

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.


Gallery

  Settings used for this example:

Component Inspector

Media Folderbudapest
Transition EffectSwipe
DirectionVertical
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!).


Gallery

  Settings used for this example:

Component Inspector

Media Folderbudapest
Transition EffectCube
Transition Speed2000

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.


Gallery

  Settings used for this example:

Component Inspector

Media Folderbudapest
Transition EffectCoverflow
Transition Speed2000
Lazy-load images?Not checked
Add pagination?Not checked
Add navigation?Not checked
Auto-play?Checked
Auto-play Delay3000
Additional Swiper OptionscoverflowEffect: {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".


Gallery

  Settings used for this example:

Component Inspector

Media Folderbudapest
Transition EffectFlip
DirectionVertical
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:
var mySwiper = new Swiper('.swiper-container', {
	lazy: {
		loadPrevNext: true,
	},
});
See the original docs!
pagination "Lazy-load images?" object/boolean Object with pagination parameters. For example:
var mySwiper = new Swiper('.swiper-container', {
	pagination: {
		el: '.swiper-pagination',
		type: 'bullets',
	},
});
See the original docs!
navigation "Add navigation?" object/boolean Object with navigation parameters. For example:
var mySwiper = new Swiper('.swiper-container', {
	navigation: {
		nextEl: '.swiper-button-next',
		prevEl: '.swiper-button-prev',
	},
});
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:
var mySwiper = new Swiper('.swiper-container', {
	autoplay: {
		delay: 5000,
	},
});
See the original docs!