Swiper

  Settings used for this example:

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

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

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

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

<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

  Script options applicable to all "Swiper" galleries...

var mySwiper = new Swiper('.swiper-container', {
	lazy: {
		loadPrevNext: true,
	},
});

var mySwiper = new Swiper('.swiper-container', {
	pagination: {
		el: '.swiper-pagination',
		type: 'bullets',
	},
});

var mySwiper = new Swiper('.swiper-container', {
	navigation: {
		nextEl: '.swiper-button-next',
		prevEl: '.swiper-button-prev',
	},
});

var mySwiper = new Swiper('.swiper-container', {
	autoplay: {
		delay: 5000,
	},
});