Simple jQuery Image Slider with Thumbnails – LittleSlideshow

Lightweight plugin to create an awesome image slider / slideshow with thumbnails. jQuery LittleSlideshow plugin gets images from user and automatically generates thumbnail based image slider.

Plugin Preview

Share this:

How to start using jQuery?
More jQuery Top, Best and New Plugins
Top 100 jQuery Plugins

Plugin Overview

Plugin:	LittleSlideshow
Author:	Nick H
Licence:	MIT Licence
Published:	February 28, 2019
Repository:	Fork on GitHub
Dependencies:	jQuery 1.3.1 or Latest version
File Type:	zip archive (HTML, CSS & JavaScript)
Package Size:	8.04 KB

Demo Download

Main Features

1. Fully Responsive and compatible with Bootstrap v3
2. Displays multiple images at one time
3. Automatically generate thumbnails that are centered below
4. Focus the current image
5. Option to auto play slideshow
6. Set max width and max height for images and thumbnails

How to Use Image Slider with Thumbnails:

1. Load the jQuery and LittleSlideshow Js and CSS files into HTML document.

<!--jQuery-->
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
		
<!-- LittleSlideshow JS-->
<script src="js/littleslideshow.min.js"></script>
		
<!--LittleSlideShow CSS-->
<link rel="stylesheet" href="css/littleslideshow.min.css">

2. Create a div element that will contains your images slideshow.

<div id="slideshow"></div>

3. Create an array of images in jQuery document ready function.

var images = [
{ src: '',  // address of your image
  alt: ''  //alt text for image
  },
{src: '', // address of your image
  alt: '' //alt text for image
  },						
];					

4. Call the plugin and insert images array into it to active the slideshow.

$('#slideshow').LittleSlideshow(images);