|
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 ( |
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.
{SWIPER()} title:Slide 1 title; text:HTML/Wiki Syntax Supported Slide 1 text; image:Slide Image URL; bgcolor:#colorcode; color: #color code for text {SWIPER}
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.
Swiper Plugin has the option to choose the placement of the slider at the following three locations
Following are some swiper slider examples.
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"}
Following slide is using the simple slide transition style with thumbnails display turned on.
{swiper fileIds="2063,2068,2064,2066,2067,2065" 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"}
Slider with file ids and cube transition style
{swiper fileIds="1472,1471,1470,1469,1468,1467,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"}