History: PluginSwiper

• «
• »

            ! Plugin Swiper

Plugin Swiper introduced in ((Tiki19))is used to create a Slider in any Tiki page using 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 opensource [http://idangero.us/swiper/|Swiper], the most modern mobile touch slider.

Built on: http://idangero.us/swiper/ 

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

!!# 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 

!!# Parameters
{pluginmanager plugin="swiper"}

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

{CODE(caption="Example Custom Slide Code" theme="default")}title:Slide 1 title; text:HTML/Wiki Syntax Supported Slide 1 text; image:Slide Image URL; bgcolor:#colorcode; color: #color code for text {CODE}

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

!!# Slider Placement on a Page
Swiper Plugin has the option to choose the placement of the slider at the following three locations
# In the body (where ever in a page body you place the slider)
# Above top bar / Top of the page (Above your page logo header)
# Above content page / under top bar (Above the page body but under the logo header)

!#Examples
Following are some swiper slider examples.


!!#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"}

{CODE(caption="Example Code" theme="default")}
{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"}
{CODE}

!!#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"}

{CODE(caption="Example Code" theme="default")}
{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"}
{CODE}

!!#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"}


{CODE(caption="Example Code" theme="default")}
{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"}
{CODE}