Plugin Swiper

Plugin Swiper (introduced in Tiki19) is used to create a Slider/Swiper in any Tiki page using a wiki-plugin syntax shortcode. You can create multiple types of sliders and can place them in different locations on a page such as above header or inside the content body. It is mobile friendly and works great on handheld devices. Plugin Swiper is based on the Swiper, the most modern OpenSource mobile touch slider.

An integration example: http://wikisuite.org/Unconference1

1.1. Key Features

• Integrated with Tiki File Galleries
• Responsive & Mobile Touch Enabled
• Multiple Transition Styles
• Full Screen or Define the size of Slider
• Add text on top of slides including HTML and Wiki Syntax
• Multiple Slider Placement Positions on a Page

1.2. Parameters

Parameters	Accepted Values	Description	Default	Since
(body of plugin)		Enter custom slides data separated by "|". Wiki Syntax / HTML supported in slide text, to include wiki page in slide text use pluginInclude.title:Slide 1 title;text:HTML/Wiki Syntax Supported Slide 1 text;image:Slide Image URL;bgcolor:#colorcode;color: #color code for text | title:Slide 2 title;text:Slide 2 text;image:Slide Image URL;bgcolor:#colorcode
background		Slider background color, enter color code for example #000		19.0
fileIds	any string except for HTML and PHP tags	List of IDs of images from the File Galleries separated by commas.
autoPlayDelay	digits	Time interval to pause before moving to next slide in seconds.	5	19.0
fgalId	separator: :	Enter file gallery id for slider		19
height	word	Enter height of slider in px or %, default min height 100px, max height will adjust with content	100px	19.0
slideContentBg	text	Enter a valid CSS color code, or an rgba value if opacity is desired; for example: #000 or rgba(00, 00, 00, 0.5).		19.0
slideContentPostion	text	Enter position for example top:20No value assigned or bottom:20No value assigned	top:20No value assigned	19.0
descriptionColor	text	Enter text color code of slide description, for example #ccc		19.0
titleColor	text	Enter text color code of slide title, for example #ccc		19.0
slidesPerView	digits	Slides visible at the same time on slider's container. Coverflow transition works best with 3 slides per view	1	19.0
width	word	Enter width of slider in px or %, default 100No value assigned	19.0
descriptionSize	word	For example 24px, default 16 px	16px	19.0
displayThumbnails	n y	Show thumbnails under main slider	n	19.0
loop	y n	Set to true to enable continuous loop mode (If you use it along with slidesperView: 'auto' then you need to specify loopedslides parameter with amount of slides to loop (duplicate)).	n	19.0
navigation	y n	Display navigation arrows	y	19.0
parallaxBgImg	text	Enter image url for parallax background behind swiper		19.0
sliderPosition	(blank) (blank) abovetopbar undertopbar	Placement of slider, above topbar, below topbar, above menus and content or inside content		19.0
slidesOffsetAfter	digits	Add (in px) additional slide offset in the end of the container (after all slides)	0	19.0
slidesOffsetBefore	digits	Add (in px) additional slide offset in the beginning of the container (before all slides)	0	19.0
slidesPerColumn	digits	Number of slides per column, for multirow layout	1	19.0
slidesPerViewMobile	digits	Slides visible at the same time on small screens	0	19.0
slidesPerViewTab	digits	Slides visible at the same time on low resolution tablets	0	19.0
spaceBetween	digits	Distance between slides in px.	0	19.0
speed	digits	Duration of transition between slides (in milliseconds)	300	19.0
titleSize	word	For example 42px, default 32 px	32px	19.0
effect	slide fade cube coverflow flip	Transition effect. Could be "slide", "fade", "cube", "coverflow" or "flip"	slide	19.0
autoHeight	n y	Set to true and slider wrapper will adapt its height to the height of the currently active slide	n	19.0
autoPlay	y n	Autoplay slider, on by default	y	19.0
centeredSlides	n y	If true, then active slide will be centered, not always on the left side.	y	19.0
freeMode	n y	If true then slides will not have fixed positions.	n	19.0
pagination	(blank) n bullets fraction progressbar	Slider pagination, default bullets	bullets	19.0
preloadImages	y n	When enabled Swiper will force to load all images.	y	19.0
slideToClickedSlide	n y	Set to true and click on any slide will produce transition to this slide.	n	19.0
slidesPerColumnFill	column row	Could be 'column' or 'row'. Defines how slides should fill rows, by column or by row	column	19.0
updateOnImagesReady	y n	When enabled Swiper will be reinitialized after all inner images ( tags) are loaded. Required preloadimages: true.	y	19.0

Custom Slide Code Explanation
Enter custom slides data separated by using "|". Wiki Syntax / HTML supported in slide text, to include wiki page in slide text use PluginInclude.

title:Slide 1 title; text:HTML/Wiki Syntax Supported Slide 1 text; image:Slide Image URL; bgcolor:#colorcode; color: #color code for text

Tip
To build an impressive image slide we must resize or choose images of the same size. Images having different sizes and dimensions will not look appropriate in the slider.

1.3. Slider Placement on a Page

Swiper Plugin has the option to choose the placement of the slider at the following three locations

1. In the body (where ever in a page body you place the slider)
2. Above top bar / Top of the page (Above your page logo header)
3. Above content page / under top bar (Above the page body but under the logo header)

1. Examples

Following are some swiper slider examples.

1.1. Basic Slider Images

Following slider is built using Tiki File Galleries file id and a transition effect.

{swiper fileIds="1472,1471,1470,1469,1468,4467,1466,1465" effect="flip" navigation="y" displayThumbnails="n" loop="y" autoPlay="y" autoHeight="n" slidesPerColumnFill="column" centeredSlides="n" slideToClickedSlide="n" freeMode="n" preloadImages="y" updateOnImagesReady="y"}

1.2. Slide with Slide transition & slide thumbnail navigation

Following slide is using the simple slide transition style with thumbnails display turned on.

{swiper fileIds="1478,1479,1476,1474,1475,1477" effect="slide" navigation="y" displayThumbnails="y" slidesPerView="1" loop="y" autoPlay="y" autoHeight="y" slidesPerColumnFill="column" centeredSlides="n" slideToClickedSlide="n" freeMode="n" preloadImages="y" updateOnImagesReady="y"}

1.3. Slider with 3D Cube Effect

Slider with file ids and cube transition style

{swiper fileIds="1472,1471,1470,1469,1468,4467,1466,1465" effect="cube" navigation="y" displayThumbnails="n" loop="y" autoPlay="y" autoHeight="n" slidesPerColumnFill="column" centeredSlides="n" slideToClickedSlide="n" freeMode="n" preloadImages="y" updateOnImagesReady="y" width="521px"}

Related

• Also see Slider Comparison