Last Updated:

Thumbnail slider with jQuery plugin

If you want to create a slider with thumbnails of images for your site, so that they are correctly displayed in browsers and are adapted to changes in the size of the browser window, then this lesson should interest you. To do this, we'll use Elastislide, a jQuery plugin for an adaptive carousel that changes the size and algorithm according to the screen size. If you insert a carousel into a container with a changing width, it will also change the width.

This solution is quite simple. But in some cases (for example, if the size of the images is large), you also need to resize the slide. The Elastislide plugin has this option, along with others.

First, you need to create HTML markup. The carousel marking consists of a main container that aligns the width of the floating container placed inside it.



Use the ID attribute and run the plugin:


where imageW is the width of the thumbnails.

Now create css styles for the slider:



Let's consider some options of the Elastislide plugin:

speed : 450
// animation speed

easing : '',
// transition effect

image W : 190
// image width

margin : 3
// field for images on the right

border : 2
// image frame

minItems : 1
// minimum number of slides to display.
// When resizing the window, at least slides will be displayed
// the amount specified in the minItems parameter
// (if minItems is less than the total number of slides)

current : 0
// number of the current slide.
// When changing the window, the plugin will always be
// display slides so that the specified image is visible.

onClick : function() { return false; }
// Return function for the click event on the slide.
// An example of getting the number of the slide on which the mouse button was pressed:
onClick : function( $item ) {
alert( 'mouse button was pressed on slide # ' + $item.index() )

It is also possible to dynamically add a new item to the carousel. The following example shows how to add a new item: