The following demonstrations open in a new page and show how to setup the styles, code and parameters. Just look at the source code for each page to see how each demonstrations works.


Swipe only

The most basic slideshow using touch and mouse swipes.

Demo #1

Previous & Next Arrows

Adding previous and next arrows to the large image. The arrows can be customized using the Mi_Thumb stylesheet.

Demo #2


Adding bullets to indicate the current slide and to show how many slides are available. In this demo the bullets can be 'tapped / clicked' to select a slide.

Demo #3

Gap between images

Adding a space between the large images.

Demo #4


Setting up the slideshow to autorun with time between change of images. In this demo the slideshow does not loop so that, when at the last slide, the images scroll back to the first slide.

Demo #5


Setting up looping of the slideshow. When autoruning, and at the last image, the next slide loops back to the first slide.

Demo #6


Adding thumbnail images to navigate the slides.

Demo #7

Play & Pause

Adding play & pause controls for autorun slideshows.

Demo #8

Full Screen

Making the slideshow fullscreen.

Demo #9

Text Only Panel

Removing background images and having text only panels.

Demo #10

2+ slideshows on a page

How to have more than one slideshow on a page.

Demo #11


How to use the callback functions.

Demo #12

Fixed Thumbnails

Using Bullets to have fixed position thumbnails beneath the large images.

Demo #13

Keyboard Controls

Using left and right keyboard keys to control Mi_Thumb.

Demo #14

Various size images

How to cater for images of different sizes.

Demo #15

Autoplay and pause videos

How to add videos and have them autoplay when on screen and pause when off screen. The videos can be click/tapped to play/pause.

Demo #16


©2017 Stu Nicholls - cssplay.com