Thumbnail Slider

Features

HTML

<div id="thumbnail-slider">
    <div class="inner">
        <ul>
            <li><a class="thumb" href="img/1.jpg"></a></li>
            <li><a class="thumb" href="img/2.jpg"></a></li>
            <li>
                <a href="/"><img class="thumb" src="1.jpg" style="height:auto;" /></a>
            </li>
        </ul>
    </div>
</div>

Alternative markup

The thumbnail images are typically defined using the following format:<a class="thumb" href="1.jpg"></a>

The script thumbnail-slider.js will set a background image based on the href value.

Benefits of this format:
  • supports lazy loading of images
  • When thumbnails have different aspect ratios, it is easier to cutomize their appearance with CSS: .thumb { background-size:contain; /*or: cover*/ }

Alternative Markup

In some cases, you may prefer or need to use a different markup structure for thumbnails.

For example, if a thumbnail must be wrapped inside a link, you cannot use the format above, since nested anchor tags are invalid in HTML.

Alternative examples:

<a href="/"><span class="thumb" style="background-image:url(1.jpg)"></span></a> or: <a href="/"><img class="thumb" src="1.jpg" /></a>

or:
Any HTML content. Each slide (<li>) can contain any type of HTML, even plain text without an image.

JavaScript

Open the thumbnail-slider.js in the download package and configure the options as needed:

var thumbnailSliderOptions = {
    sliderId: "thumbnail-slider",
    orientation: "horizontal", // or "vertical"
    thumbWidth: "140px", // or "xx%", or "auto"
    thumbHeight: "70px", // or "xx%", or "auto"
    showMode: 1,
    autoAdvance: true,
    selectable: true,
    slideInterval: 3000, // in ms
    transitionSpeed: 300, //The roll-in duration in ms
    shuffle: false,
    startSlideIndex: 0, // The index of the slide to start from (0-based).
    pauseOnHover: true,
    initSliderByCallingInitFunc: false,
    rightGap: 0, // or 90, or "default"
    keyboardNav: true,
    mousewheelNav: false,
    before: null,
};

var mcThumbnailSlider = new ThumbnailSlider(thumbnailSliderOptions);
An integer (1, 2, 3 or 4) specifying how the thumbnails are scrolled:
  • 1:   Move one by one; rewinds to the start after the last thumbnail.
  • 2:   Highlight one by one; scrolls only when the active thumbnail is out of view; rewinds at the end.
  • 3:   Highlight one by one. active thumbnail stays centered; loops continuously.
  • 4:   Scrolls a full group of visible thumbnails at a time; rewinds after the last group.
true or false indicating if auto scrolling the thumbnails.
If true:
  • The current active thumbnail receives the CSS class active, allowing it to appear differently from others.
  • Clicking a thumbnail updates the current active index and sets that thumbnail as active.

Note: When showMode is 2 or 3, this is automatically overridden to true.

If set to true, all slides will be randomized at the start.

In thumbnail-slider.js you will find the following line of code:

var mcThumbnailSlider = new ThumbnailSlider(thumbnailSliderOptions);

This line initializes the slider when the page loads.

If the slider markup is not available, or it is (or its container is) display: none, the slider should not be initialized during page load. Instead, the slider should be initialized using one of the two methods below after the markup is ready or the container becomes visible.

  • Option 1: Set initSliderByCallingInitFunc: true

    When this option is enabled, the slider will not be instantiated automatically.
    You will need to explicitly call the initialization function when ready:

    mcThumbnailSlider.init();
  • Option 2: Manually instantiate the slider

    Remove the following line from the thumbnail-slider.js:

    var mcThumbnailSlider = new ThumbnailSlider(thumbnailSliderOptions);

    Then, add the line to the location in your code where the slider should be initialized (i.e., when the markup is ready or the container becomes visible).

    Note: the option initSliderByCallingInitFunc must be set to false when using this approach.

An integer or "default" that specifies the empty space between the last thumbnail and the slider's right border (or bottom border if orientation: "vertical").

If showMode is not 3, the last thumbnail may leave a blank area when scrolled into view.

Examples:
  • {rightGap: "default"} — keeps the default blank space.
  • {rightGap: 0} — removes any blank space after the last thumbnail.
  • {rightGap: 100} — allows up to 100px of blank space after the last thumbnail.

If true, the slider can be navigated using the left and right arrow keys.

true or false. If set to true, users can scroll through the thumbnails using the mouse wheel while hovering over the slider.

This option is typically enabled when orientation is set to "vertical".

Callback function that executes at the start of each slide transition

See the flickr-like-slideshow for an example of using this callback to synchronize with another slider.

Built-in Functions

If you need to control the slider programmatically, click here for more details.

  • mcThumbnailSlider.display(slideIndexOrLi): Navigate to a specific slide. The parameter can be either the index number (0-based) or the slide's <li> element.

    For example, the following code assigns a function to a link: when the link is clicked, the slider will display the 7th image: <a href="#" onclick="mcThumbnailSlider.display(6); return false;">7th image</a>

  • mcThumbnailSlider.prev(): Navigate to the previous slide.
  • mcThumbnailSlider.next(): Navigate to the next slide.
  • mcThumbnailSlider.getPos(): Returns the index of the current slide.
  • mcThumbnailSlider.getSlides(): Returns all the slide elements (<li> elements).
  • mcThumbnailSlider.getSlideIndex(li): Returns the index number of the specified slide element (<li>).
  • mcThumbnailSlider.init(): Starts the slider if it was not initialized during page load. Refer to the initSliderByCallingInitFunc option for more details.

    Note: If you pass a number to it, init(idxNum), the thumbnail at the specified index will be in the viewport when the slider starts.

Built-in Properties

  • li.thumb: The thumbnail of the slide.
  • li.thumbSrc: The thumbnail image source of the slide.
Example: Refer to the script in demo5.html (included in the download package).

Styles

The styles are primarily configured in the thumbnail-slider.css file.

However, note that some styles are defined in the thumbnail-slider.js script, such as orientation, thumbWidth, thumbHeight, and rightGap, as mentioned in the JavaScript section above.

▲