History: PluginSwiper

• «
• »

            ! 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 [https://swiperjs.com/|Swiper], the most modern OpenSource mobile touch slider.

^ Please see also ((Slider Comparison)) ^

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

!Related
* Also see ((Slider Comparison))