Mi_Thumb
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.
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.
The most basic slideshow using touch and mouse swipes.
Demo #1Adding previous and next arrows to the large image. The arrows can be customized using the Mi_Thumb stylesheet.
Demo #2Adding 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 #3Adding a space between the large images.
Demo #4Setting 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 #5Setting up looping of the slideshow. When autoruning, and at the last image, the next slide loops back to the first slide.
Demo #6Adding thumbnail images to navigate the slides.
Demo #7Adding play & pause controls for autorun slideshows.
Demo #8Making the slideshow fullscreen.
Demo #9Removing background images and having text only panels.
Demo #10How to have more than one slideshow on a page.
Demo #11How to use the callback functions.
Demo #12Using Bullets to have fixed position thumbnails beneath the large images.
Demo #13Using left and right keyboard keys to control Mi_Thumb.
Demo #14How to cater for images of different sizes.
Demo #15How 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 #16Please consider making a donation, every little helps.