Loading...
 

Introduction 

Plugin Slideshow is an existing Tiki Plugin to create a slideshow of a page. The Plugin is updated in the Tiki 19.0 and now is moved on Reveal.js. The PluginSlideShow is now more powerful than ever before. It has better transitions and control over individual slides.

Admin Settings 

Go to Admin Control Panels and search for "Slideshow" and enable the Slideshow features mentioning Reveal.js the updated Slideshow component.
Slideshow Settings

Parameters 

Introduced in Tiki 7.
Preferences required: wikiplugin_slideshow, feature_slideshow
Parameters Accepted Values Description Default Since
parallaxBackgroundHorizontal Number of pixels to move the parallax background per slide, Calculated automatically unless specified. Set to 0 to disable movement along an axis 19.0
parallaxBackgroundSize syntax, e.g. "2100px 900px" - currently only pixels are supported (don't use % or auto) 19.0
parallaxBackgroundVertical 19.0
autoSlide digits Number of milliseconds between automatically proceeding to the next slide, disabled when set to 0, this value can be overwritten by using a data-autoslide attribute on your slides 0 19.0
autoSlideStoppable y
n
Stop auto-sliding after user input y 19.0
alignImage n
y
Automatically move images to left hand side of slide text, will only align images greater than 200px in width n 19.0
backgroundTransition none
fade
slide
convex
concave
zoom
Transition style for full page slide backgrounds fade 19.0
controls y
n
Display presentation control arrows y 19.0
controlsBackArrows faded
hidden
visible
Visibility rule for backwards navigation arrows; "faded", "hidden" or "visible" faded 19.0
controlsLayout bottom-right
edges
Determines where controls appear, "edges" or "bottom-right" bottom-right 19.0
fragmentClass grow
shrink
fade-out
fade-up
current-visible
grow 19.0
fragmentHighlightColor none
red
green
blue
blue 19.0
fragments y
n
Turns fragments on and off globally y 19.0
parallaxBackgroundImage Valid URL URL of the background image to use in your slideshow, overrides backgroundcolor 19.0
progress y
n
Display a presentation progress bar y 19.0
slideNumber y
n
Display the page number of the current slide n 19.0
theme black
blood
beige
league
moon
night
serif
simple
sky
solarized
The theme you want to use for the slideshow, default will be what you choose from the admin panel under Look and Feel for jQuery UI black 19.0
transition zoom
fade
slide
convex
concave
(blank)
Transition style zoom 19.0
transitionSpeed default
fast
slow
Transition Speed 19.0


Tiki Page to a Slideshow 

The Plugin Slideshow converts a Tiki page to a slide show , every H1, H2, and H3 tag starts a new slide. Example screenshot below has two headings making two slides in a slideshow.

Tiki Slideshow

Slides Thumbnail View 

On the desktop you can reach the Slides Thumbnail View by hitting ESC on the keyboard. Use arrow keys to choose the slide you want to show.
Screenshot

Custom Backgrounds 

Plugin Slideshow enables you setup different types of backgrounds as follows:

  1. Static background image for all slides
  2. Different background images for individual slides using Plugin Slide
  3. Parallax background image
  4. Video backgrounds


Slideshowbg

Mobile touch enabled 

The slideshow is optimised for smart phones and tablets. It’s touch gestures enable you to easily browse the slideshow or jump to a screen.

Go to next or previous slides
Simply drag right or left to move forward or backwards in the slideshow.
TikislideshowmobileArtboard 1

View thumbnails of all the slides and choose a slide to browse
Use two fingers zoom in and zoom out gestures to view slide thumbnails or browse a slide you choose.
Tikislideshowmobile2Artboard 1 Copy

Slideshow in iFrame 

Slideshows are full screen by default but to show you a working slideshow within this documentation we placed one in the iFrame.

Plugin Slideshow code
{slideshow theme="sky" parallaxBackgroundImage="https://bootstrap4.tiki.org/tiki-download_file.php?display&fileId=100" transition="convex" transitionSpeed="default" backgroundTransition="fade" controls="y" controlsLayout="bottom-right" controlsBackArrows="faded" progress="y" slideNumber="y" fragments="y" fragmentClass="grow" fragmentHighlightColor="none" autoSlideStoppable="y"}

Parallax Background Example Slideshow 

Plugin Slideshow code
{slideshow theme="black" parallaxBackgroundImage="https://bootstrap4.tiki.org/tiki-download_file.php?fileId=10&display" parallaxBackgroundSize="3000px 2000px" parallaxBackgroundHorizontal="50" transition="zoom" transitionSpeed="default" backgroundTransition="none" controls="y" controlsLayout="bottom-right" controlsBackArrows="faded" progress="y" slideNumber="y" fragments="n" fragmentClass="grow" fragmentHighlightColor="none" autoSlideStoppable="y"}

Switch Theme

websearch

Emulate Groups

Your Groups
    Switch to Groups