Loading...
 
Embed swiper in content, support file galleries, files id and custom content

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.

Please see also Slider Comparison

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

Embed swiper in content, support file galleries, files id and custom content
Introduced in Tiki 19.
Go to the source code
Preferences required: wikiplugin_swiper

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.

Example Custom Slide Code
Copy to clipboard
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.

Example Code
Copy to clipboard
{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.

Example Code
Copy to clipboard
{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


Example Code
Copy to clipboard
{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

doc.tiki.org

Get Started

Admin Guide User Guide

Keywords

Keywords serve as "hubs" for navigation within the Tiki documentation. They correspond to development keywords (bug reports and feature requests):

Accessibility (WAI and 508)
Accounting
Articles and Submissions
Backlinks
Banners
Batch
BigBlueButton audio/video/chat/screensharing
Blog
Bookmark
Browser Compatibility
Link Cache
Calendar
Category
Chat
Clean URLs
Comments
Communication Center
Compression (gzip)
Contacts (Address Book)
Contact us
Content Templates
Contribution
Cookie
Copyright
Credit
Custom Home and Group Home Page
Date and Time
Debugger Console
Directory of hyperlinks
Documentation link from Tiki to doc.tiki.org (Help System)
Docs
Draw
Dynamic Content
Dynamic Variable
External Authentication
FAQ
Featured links
File Gallery
Forum
Friendship Network (Community)
Gmap Google maps
Groups
Hotword
HTML Page
i18n (Multilingual, l10n)
Image Gallery
Import-Export
Install
Integrator
Interoperability
Inter-User Messages
InterTiki
Kaltura video management
Karma
Live Support
Login
Logs (system & action)
Look and Feel
Mail-in
Map with Mapserver
Menu
Meta Elements
Mobile Tiki and Voice Tiki
Module
MultiTiki
MyTiki
Newsletter
Notepad
Payment
Performance Speed / Load
Permissions
Platform independence (Linux-Apache, Windows/IIS, Mac, BSD)
Polls
Profiles
Profile Manager
Report
Toolbar
Quiz
Rating
Feeds
Score
Search engine optimization
Search
Search and Replace
Security
Semantic links
Shadowbox
Shadow Layers
Share
Shopping cart
Shoutbox
Slideshow
Smiley
Social Networks
Spam protection (Anti-bot CATPCHA)
Spellcheck
Spreadsheet
Stats
Surveys
Tags
Task
Tell a Friend, alert + Social Bookmarking
TikiTests
Theme CSS & Smarty
Tiki Manager
Trackers
Transitions
User Administration including registration and banning
User Files
User Menu
Watch
WebDAV
Webmail
Web Services
Wiki History, page rename, etc
Wiki Syntax
Wiki structure (book and table of content)
Workspace
WSOD
WYSIWYCA
WYSIWYG
XMLRPC

Tiki Newsletter

Delivered fresh to your email inbox!
Newsletter subscribe icon
Don't miss major announcements and other news!
Contribute to Tiki