History: PluginSwiper

            {syntax type="markdown"  editor="wysiwyg"} # 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.

{BOX()} Please see also ((Slider Comparison)) {BOX}

##$ 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")}
{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}
{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

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)


#$ 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="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"}

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

# Related

- Also see ((Slider Comparison))