web design

jQuery thumbnail scroller

jQuery thumbnail scroller

A thumbnail/image scroller that can be used as standalone or alongside lightboxes, gallery scripts etc. Features include: scrolling by cursor movement, buttons and/or touch, vertical and/or horizontal scrolling, customization via CSS and option parameters, methods for triggering events like scroll-to, update, destroy etc., user-defined callbacks functions and more.

Current version 2.0.1 (Changelog) – Version 1.x.x (no longer actively maintained)

How to use it


Get plugin files. Extract and upload jquery.mThumbnailScroller.min.js and jquery.mThumbnailScroller.css to your web server (more info)

jquery.mThumbnailScroller.min.js is the minified version of the plugin script (jquery.mThumbnailScroller.js) and jquery.mThumbnailScroller.css holds the styling of scroller(s). The archive also contains a number of HTML examples and demos inside examples directory.

Include jquery.mThumbnailScroller.css in the head tag your html document

<link rel="stylesheet" href="/path/to/jquery.mThumbnailScroller.css">

Include jQuery library (if your project doesn’t use it already) and jquery.mThumbnailScroller.min.js in your document’s head or body tag

Some frameworks and CMS include jQuery library in the head tag to make sure it’s loaded when other scripts request it. Usually, including .js files on the bottom of the HTML document (just before the closing body tag) is recommended for better performance. In any case, jQuery must be included first, before plugin scripts.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="/path/to/jquery.mThumbnailScroller.min.js"></script>

Create the markup with your images, links, etc. which is basically an element (e.g. a div) holding an unordered list (ul)

<div id="my-thumbs-list">
    <li><a href="image-1-link"><img src="/path/to/image-1-file" /></a></li>
    <li><a href="image-2-link"><img src="/path/to/image-2-file" /></a></li>
    <li><a href="image-3-link"><img src="/path/to/image-3-file" /></a></li>
    <li><a href="image-4-link"><img src="/path/to/image-4-file" /></a></li>
    <!-- and so on... -->


Give your element (in the example above #my-thumbs-list) a width and/or height value and a CSS overflow value of auto or hidden. For example:

  overflow: auto;
  width: 800px;
  height: auto;

If you’re creating a vertical scroller, you’ll need to set a height (or max-height) value

  overflow: auto;
  width: 300px;
  height: 500px;


Initialize via javascript

Create a script and call mThumbnailScroller function on your element selector along with the option parameters you want

              axis:"x", //change to "y" for vertical scroller

more info

The code is wrapped in (function($){ ... })(jQuery);. This ensures no conflict between jQuery and other libraries using $ shortcut (see Avoiding Conflicts with Other Libraries for more info). The plugin function is called on $(window).load() so it executes after all images are loaded.

You can change the function selector "#my-thumbs-list" to any selector you want. For instance, if you want to create scrollers for all elements with class myClass, you simply do:


You may also have multiple selectors by inserting comma separated values

$(".myClass, #my-thumbs-list").mThumbnailScroller();

When you need multiple selectors with different options for each one, you can do:


Initialize via HTML

If you prefer to initialize the plugin without a script, you can simply give your element the class mThumbnailScroller and optionally set its orientation via the HTML data attribute data-mts-axis ("x" for horizontal and "y" for vertical). For example:

<div id="my-thumbs-list" class="mThumbnailScroller" data-mts-axis="x">
    <!-- your content -->

See code examples on Github

Basic configuration & option parameters

The 2 basic options are axis which defines the scroller orientation and type which defines how the user interacts with the scroller.


The default scroller orientation is horizontal, so if you don’t set an axis option value, it defaults to "x"

$("#my-thumbs-list").mThumbnailScroller({ axis:"x" });

To create a vertical scroller, set axis option to "y"

$("#my-thumbs-list").mThumbnailScroller({ axis:"y" });

or use data-mts-axis="y" if you’re initializing the plugin via HTML


You can set the type of scroller via javascript, for example:

$("#my-thumbs-list").mThumbnailScroller({ type:"hover-50" });

or using the HTML data attribute data-mts-type, e.g.:

<div class="mThumbnailScroller" data-mts-type="hover-50">...</div>

There are 4 basic scroller types:

  1. "hover-[number]" (e.g. "hover-33", "hover-80" etc.)

    Scrolling content in linear mode by hovering the cursor over the scroller edges. The edges are defined by the type name, where [number] indicates the percentage of the scroller area in which scrolling is idle. For example, setting "hover-50" (default value) on a 600 pixels wide horizontal scroller, means that scrolling will be triggered only when the cursor is over the first 150 pixels from the left or right edge. And when cursor is over the 50% of the scroller width (300 pixels), scrolling will be idle or stopped.

  2. hover-precise

    Scrolling content with animation easing (non-linear mode) by hovering the cursor over the scroller. The scrolling speed and direction is directly affected by the cursor movement and position within the scroller.

  3. "click-[number]" (e.g. "click-50", "click-90" etc.)

    Scrolling content by clicking buttons. The scrolling amount is defined by type name, where [number] indicates a percentage of the scroller area. For example, setting "click-50" on a 800 pixels wide horizontal scroller, means that each time you click the left or right arrow buttons, the content will scroll by 400 pixels (50% of 800px) to the left or right.

  4. click-thumb

    Scrolling each image/thumbnail at a time by clicking buttons.

"hover-[number]" and hover-precise types become disabled on touch-enabled devices and replaced by content touch-swipe scrolling.


You can configure your scroller(s) using the following option parameters when calling mThumbnailScroller function
Usage $(selector).mThumbnailScroller({ option: value });

setWidth: false
Set the width of the scroller (overwrites CSS width), value in pixels (integer) or percentage (string).
setHeight: false
Set the height of the scroller (overwrites CSS height), value in pixels (integer) or percentage (string).
setTop: 0
Set the initial css top property of content, accepts string values (css top position).
Example: setTop: "-100px".
setLeft: 0
Set the initial css left property of content, accepts string values (css left position).
Example: setLeft: "-100px".
type: "string"
Scroller type defines the way users interact with the scroller.
Available values:

  • "hover-[number]" (e.g. "hover-50")
    Scrolling content in linear mode by hovering the cursor over the scroller edges. The edges are defined by the type name, where [number] indicates the percentage of the scroller area in which scrolling is idle. Scrolling accelerates proportionally according to cursor position: e.g. scrolling speed increases as the cursor moves towards the edges and decreases as it moves towards the center of the scroller area.
  • "hover-precise" Scrolling content with animation easing (non-linear mode) by hovering the cursor over the scroller. The scrolling speed and direction is directly affected by the cursor movement and position within the scroller.
  • click-[number] (e.g. "click-80")
    Scrolling content by clicking buttons. The scrolling amount is defined by type name, where [number] indicates a percentage of the scroller area.
  • "click-thumb" Scrolling each image/thumbnail at a time by clicking buttons. Each click will scroll the content by the width/height of the next non-visible adjusted image.
axis: "string"
Define scroller axis (scrolling orientation).
Available values: "y", "x", "yx".

speed: integer
Set the scrolling speed (higher=faster). Default value is 15.
contentTouchScroll: integer
Enable or disable content touch-swipe scrolling for touch-enabled devices.
To completely disable, set contentTouchScroll: false. Integer values define the axis-specific minimum amount required for scrolling momentum (default value is 25).
markup:{ thumbnailsContainer: "string" }
Set the element containing your thumbnails. By default, this is an unordered list (ul).
markup:{ thumbnailContainer: "string" }
Set the element containing each thumbnail. By default this is a list-item (li).
markup:{ thumbnailElement: "string" }
Set the actual thumbnail element. By default, this is an image tag (img).
markup:{ buttonsPlaceholder: "string" }
Set the placeholder element of the buttons.
Set buttons HTML content. Default value is "SVG set 1". There are 5 ready-to-use SVG arrows set, that you can use with the values "SVG set 2", "SVG set 3" etc. If you want to use your own button icon, text etc., you can do for example:
      up:"&uarr;", //HTML up-arrow code
      down:"<img src='...' />", //a custom image
      left:">", //plain text
      right:"&rarr;" //HTML right-arrow code
SVG arrows will fallback to HTML codes on IE8.
advanced:{ autoExpandHorizontalScroll: boolean }
Auto-expand content horizontally (for "x" or "yx" axis).
If set to true (default), content will expand horizontally to accomodate any floated/inline-block elements (such as li, a, img etc.).
advanced:{ updateOnContentResize: boolean }
Update scroller(s) automatically on content, element or viewport resize. The value should be true (default) for fluid layouts/elements, adding/removing content dynamically, hiding/showing elements etc.
advanced:{ updateOnImageLoad: boolean }
Update scroller(s) automatically each time an image inside the element is fully loaded. The value is true by default.
advanced:{ updateOnSelectorChange: "string" }
Update scroller(s) automatically when the amount and size of specific selectors changes.
Useful when you need to update the scroller(s) automatically, each time a type of element is added, removed or changes its size.
For example, setting updateOnSelectorChange: "ul li" will update the scroller each time list-items inside the element are changed. Setting the value to true, will update the scroller each time any element is changed. To disable (default) set to false.
theme: "string"
Set a ready-to-use scroller theme (plugin’s CSS contains all themes).
      onInit: function(){}
A function/custom code to execute when the scroller has initialized (callbacks demo).
      console.log("scroller initialized");
      onScrollStart: function(){}
A function/custom code to execute when scrolling starts (callbacks demo).
      console.log("scroll started");
      onScroll: function(){}
A function/custom code to execute when scrolling is completed (callbacks demo).
      console.log("scroll completed");
      onTotalScroll: function(){}
A function/custom code to execute when scrolling is completed and content is scrolled all the way to the end (bottom and/or right) (callbacks demo).
      console.log("Scrolled to 100%");
      onTotalScrollBack: function(){}
A function/custom code to execute when scrolling is completed and content is scrolled back to the beginning (top and/or left) (callbacks demo).
      console.log("Scrolled back to 0%");
      onTotalScrollOffset: integer
Set an offset for the onTotalScroll callback option.
For example, setting onTotalScrollOffset: 100 will trigger the onTotalScroll callback 100 pixels before the end of scrolling is reached.
      onTotalScrollBackOffset: integer
Set an offset for the onTotalScrollBack callback option.
For example, setting onTotalScrollBackOffset: 100 will trigger the onTotalScrollBack callback 100 pixels before the beginning of scrolling is reached.
      whileScrolling: function(){}
A function/custom code to execute while scrolling is active (callbacks demo).
      alwaysTriggerOffsets: boolean
Control the way onTotalScroll and onTotalScrollBack offsets execute.
By default, callback offsets will trigger repeatedly while content is scrolling within the offsets.
Set alwaysTriggerOffsets: false when you need to trigger onTotalScroll and onTotalScrollBack callbacks only once.
live: boolean, "string"
Enable or disable the creation of scroller(s) on all elements matching the current selector, now and in the future.
Set live: true when you need to add scroller(s) on elements that do not yet exist in the page. These could be elements added by other scripts or plugins after some action by the user.
If you need at any time to disable or enable the live option, set live: "off" and "on" respectively.
You can also tell the script to disable live option after the first invocation by setting live: "once".
liveSelector: "string"
Set the matching set of elements to apply a scroller, now and in the future.

Plugin methods

Methods are ways to execute various scroller actions programmatically from within your script(s).


Usage $(selector).mThumbnailScroller("update");

Call the update method to manually update existing scrollers to accomodate new content or resized element(s). This method is by default called automatically by the script (via updateOnContentResize option) when the element itself and/or its content size changes.


Usage $(selector).mThumbnailScroller("scrollTo", position, {options});

Call the scrollTo method to scroll content to the position parameter. Position parameter can be a string (e.g. "#element-id", "bottom", "left" etc.), an integer indicating number of pixels (e.g. 100), an array for y/x axis (e.g. [100,100]), a js/jQuery object, a function etc. method demo

view examples

Scroll to right (end)

$(selector).mThumbnailScroller("scrollTo", "right");

Scroll to the last element within your content

$(selector).mThumbnailScroller("scrollTo", "last");

Scroll to element with id myID

var to="#myID";
$(selector).mThumbnailScroller("scrollTo", to);

Scroll by 200 pixels

$(selector).mThumbnailScroller("scrollTo", "-=200"); //scroll forward
$(selector).mThumbnailScroller("scrollTo", "+=200"); //scroll backward

scrollTo position parameter

Position parameter can be:

  • "string"
    • Element selector
      For example, scroll to element with id “element-id”:
    • Special pre-defined position
      For example, scroll to right:

      Pre-defined position strings:

      • "bottom" – scroll to bottom
      • "top" – scroll to top
      • "right" – scroll to right
      • "left" – scroll to left
      • "first" – scroll to the position of the first element within content
      • "last" – scroll to the position of the last element within content

    • Number of pixels less/more: (e.g. "-=100"/"+=100")
      For example, scroll by 100 pixels right:
  • integer
    • Number of pixels (from left and/or top)
      For example, scroll to 100 pixels:
  • [array]
    • Different y/x position
      For example, scroll to 100 pixels from top and 50 pixels from left:
  • object/function
    • jQuery object
      For example, scroll to element with id “element-id”:
    • js object
      For example, scroll to element with id “element-id”:
    • function
      For example, scroll to 100 pixels:
      $(selector).mThumbnailScroller("scrollTo",function(){ return 100 });

scrollTo method options

speed: integer
Scrolling speed.
$(selector).mThumbnailScroller("scrollTo", "-=200", {
  speed: 30
duration: integer
Scrolling animation duration, value in milliseconds.
$(selector).mThumbnailScroller("scrollTo", "right", {
  duration: 1000
easing: "string"
Scrolling animation easing, values:

  • "easeInOut"
  • "easeOut"
  • "easeInOutSmooth"
  • "easeOutSmooth"
  • "easeInOutStrong"
  • "easeOutStrong"
  • "easeInOut"
  • "easeInOut"


$(selector).mThumbnailScroller("scrollTo", 300, {
  easing: "easeOutSmooth"
callbacks: boolean
Trigger user defined callbacks after scroll-to event is completed, values: true, false.
$(selector).mThumbnailScroller("scrollTo", "top", {
  callbacks: false
timeout: integer
Method timeout (delay). The default timeout is 60 (milliseconds) in order to work with automatic scroller update functionality, value in milliseconds.
$(selector).mThumbnailScroller("scrollTo", "last", {
  timeout: 0 //no timeout


Usage $(selector).mThumbnailScroller("stop");

Stops running scrolling animations. Usefull when you wish to interrupt a previously scrollTo call.


Usage $(selector).mThumbnailScroller("disable");

Calling disable method will temporarily disable the scroller(s). Disabled scrollers can be re-enabled by calling the update method.

To disable a scroller and reset its content position, call the method by setting its reset parameter to true:

$(selector).mThumbnailScroller("disable", true);

method demo


Usage $(selector).mThumbnailScroller("destroy");

Calling destroy method will completely remove the scroller and return the element to its original state.

method demo

Scroller styling & themes

You can style your scroller(s) using jquery.mThumbnailScroller.css which contains the basic/default styling and few ready-to-use themes.

You can modify the default styling or an existing scroller theme directly, clone a theme and change it to your needs or overwrite the CSS in another stylesheet. If you wish to maintain compatibility with future plugin versions (that may include an updated version of jquery.mThumbnailScroller.css), I recommend using your own custom (or cloned) theme (creating your own custom theme), or overwriting the CSS. This way you can always upgrade jquery.mThumbnailScroller.css without having to redo your changes.


Plugin’s CSS includes a number of ready-to-use themes for quickly applying a basic styling to your scroller(s). To apply a theme, use theme option parameter:

    theme: "theme-name"

or the HTML data attribute data-mts-theme in your markup:

<div class="mThumbnailScroller" data-mts-theme="theme-name">...</div>

themes list


A theme to use in conjunction with any scroller type using buttons. Uses a specific SVG set of custom styled buttons placed inside the scrolling area (see the theme in the demo). Example:



A theme to use in conjunction with any scroller type using buttons. Uses a specific SVG set of custom styled buttons placed outside of the scrolling area (see the theme in the demo). The buttons in this theme are appended directly inside your element, meaning that the element must have a non-static CSS position (the plugin script changes this automatically) and a left/right (or top/bottom) padding in order for the buttons to display as intended. Example:

  position: relative;
  padding: 0 55px;


A theme which uses hover-precise scroller type (overwrites type option). It applies a left/right (or top/bottom) margin on the first and last images for better usability (see the theme in this example). Example:



A theme which uses hover-85 scroller type (overwrites type option) and specific scrolling speed (see the theme in the demo). Example:


creating your own custom theme

Create a name for your theme, e.g. “my-theme” and set it as the value of the theme option


Your element will get the class “mTS-my-theme” (your theme-name with the prefix “mTS”), so you can create your CSS using the .mTS-my-theme in your rules. For instance:

.mTS-my-theme{ padding: 10px; }
.mTS-my-theme .mTSThumbContainer{ margin: 0 5px; } 
/* and so on... */

User-defined callbacks

You can trigger your own js function(s) by using plugin’s callbacks option parameter (see all availbale callbacks in configuration section). Some examples:

        onScroll: function(){ /* do something */ }
        onTotalScroll: function(){ myFunction(); }

function myFunction(){
   /* do something */

The plugin returns a number of values and objects that can be used inside the callbacks

  • this – the scroller element
  • this.mts.content – the scrollable element containing the content (e.g. the ul element) as jquery object
  • this.mts.top – content’s top position (pixels)
  • this.mts.left – content’s left position (pixels)
  • this.mts.topPct – content vertical scrolling percentage
  • this.mts.leftPct – content horizontal scrolling percentage
  • this.mts.direction – content’s scrolling direction (returns "x" or "y")

view code examples

Get the scrolling percentage of a horizontal scroller while scrolling is active

        whileScrolling: function(){
          var result=this.mts.leftPct;

Append new content when scrolling reaches scroller’s right edge

        onTotalScroll: function(){

function appendData(el){
   el.append("<li>new data</li>");

Plugin dependencies & requirements

  • jQuery version 1.6.0 or higher


This work is released under the MIT License.
You are free to use, study, improve and modify it wherever and however you like.

Pages: 1 2 3


Post a comment

Comments pages: 1 10 11 12

  1. Kyle
    Posted on January 21, 2015 at 19:01 Permalink

    Hi, i’m trying to use your plugin for my website, which works great, so i decided starting tests on mobile devices, specifically android tablets (i’ll try ipads onwards) and i have a little issue: I have a main div 500% wide, with 5 sections each one 20% wide, every desktop browser fits each 20% section to screen width, which looks and works great . However, when i open the file on any android browser, it fits and shows the entire 500% div width on screen, obviously the entire layout looks large and thin. At this point i’m still working with local files. What am i doing wrong? Is it a compatibility issue? Thank you so much.

    • malihu
      Posted on January 21, 2015 at 20:34 Permalink

      I can’t really say but as far the plugin goes, you could try disabling autoExpandHorizontalScroll option parameter (set to false or 0) and see if works for you.

  2. Ahsan Mughal
    Posted on January 16, 2015 at 23:30 Permalink

    Sir is there possible to move image like normal slider

    not move whole image list..

    • malihu
      Posted on January 17, 2015 at 00:08 Permalink


      Setting the type option parameter to “click-thumb” scrolls each image/thumbnail at a time (like the top scroller in this demo).

      Another way would be to give your images the same width as your container element and set type to “click-100″.

  3. jv
    Posted on January 9, 2015 at 23:42 Permalink

    Another great plugin, Is this slider limited to just images or can I put anything in it for sliding?

    • malihu
      Posted on January 10, 2015 at 03:15 Permalink

      You can slide anything.

      You can define your own element selectors (see markup options in “Configuration”). More specifically, you should define what your actual “thumbnail” element is using the thumbnailElement option parameter. For example, if you would like to slide paragraphs inside unordered list items you should do:
      $("#content-1").mThumbnailScroller({ markup:{ thumbnailElement: "p" } });

      Using the markup options you can really slide anything ;)

  4. bman
    Posted on December 28, 2014 at 13:18 Permalink

    Hey Malihu,
    you’ve created great pieces of code.
    How can we turn the thumbnail scroller into a kind of endless scroller?
    Thank you in advance

    • malihu
      Posted on December 28, 2014 at 17:25 Permalink

      You can’t (at least at the moment) and carousel-like scrolling would only work with “click” scroller types. I’ll try to add such feature on the next version.

  5. Sadra
    Posted on December 18, 2014 at 11:01 Permalink

    Hi and thanks for the great extension.

    Would you be able to tell me how to reverse the direction of the scrolling? I have a RTL site and I have put RTL in my css but the scroller doesnt scroll the right way so it goes too far to the right and not enough to the left?

    Thanks in advance.

    • malihu
      Posted on December 18, 2014 at 18:10 Permalink


      In order for the script to work correctly without any other CSS changes, apply the RTL direction using the following ways:

      1. via HTML
      Add dir=”rtl” to your root element, for example:
      <body dir="rtl">

      2. via CSS
      Add “direction: rtl” to any parent element, e.g.:
      body{ direction: rtl; }

      In any case, do not apply the direction on the scroller element directly. Just apply it to a parent element.

  6. Thom
    Posted on November 30, 2014 at 10:43 Permalink

    first of all, thanx for the great job of this scroller.
    my issue is: i’ve like to use this scroller with the yx axis, depend on media queries.
    your demo of this works very well. but my layout needs a scroll x on smaller widths(horizontal bar 100%), and a scroll y on larger widths (vertical sidebar). i tried some changes in the css, but i can’t figure it out.
    is there a simple solution for?


    • malihu
      Posted on November 30, 2014 at 19:42 Permalink

      “Reversing” the CSS properties in css_media_queries_demo.html for example will do exactly what you need. Change the CSS of the demo to the following and test it:
      .content{ overflow: auto; position: relative; padding: 10px; background: #333; margin: 10px; width: 65%; height: auto; float: none; } .content li{ float: left; margin: 0 4px; overflow: hidden; } .content li a{ display: inline-block; border: 7px solid rgba(255,255,255,.1); } .content .mTSButton{ background-color: #333; } @media only screen and (min-width: 1024px){ .content{ width: 325px; height: 500px; float: left; } .content li{ float: none; margin: 8px 0; } }

      • Thom
        Posted on November 30, 2014 at 22:15 Permalink

        Ok, that did the trick
        Thnx for the quick support !

  7. luis rabines
    Posted on November 24, 2014 at 22:42 Permalink

    Dude great tutorial and plugin really help me a lot.
    One quick question, i don’t get how to make the scroller load or start when it is ready.

    Right now it take a sec for the scroller to get ready. You can see a jump in the page when loading.

    Thank you

  8. Marco
    Posted on November 23, 2014 at 22:15 Permalink

    Hi, great script!
    It’s possible to “autoplay the scroll when the page is loaded and pause it when we are hover?

    Thanks a lot!

    • malihu
      Posted on November 24, 2014 at 00:49 Permalink

      Sure. Take a look at the auto_scroll_example.html in plugin archive. It does exactly what you describe with few lines of code (see it online: http://manos.malihu.gr/repository/jquery-thumbnail-scroller/demo/examples/auto_scroll_example.html).

      • Marco
        Posted on November 24, 2014 at 23:10 Permalink

        Thank for the answar!
        I’ve a just last question..
        I’ve implemented this solution but I need a sloowly and costant movement … and with your code the scroll accellerate in the middle.
        I’ve tried to put “speed=1″ but don’t work..

        • malihu
          Posted on November 25, 2014 at 00:30 Permalink

          You just need to change the easing option in the scrollTo method call to "linear". For example in auto_scroll_example.html:

          • Marco
            Posted on November 25, 2014 at 11:01 Permalink

            Thank you very much!

  9. Adi
    Posted on November 15, 2014 at 03:30 Permalink

    Hi there Malihu. Amazing work both this and the mcustom scrollbar!

    I’m trying out this one now.. I setup everything and everything works just fine (using latest version of this plugin of course!). My only gripe is when using ‘hover-precise’. This mode should be integrated with the regular ‘hover-[number]’ functionality. By that, I mean, it should scroll all the way to the far end when I’m holding my mouse short of the scrolled container edge (currently, I have to drag my mouse after/before the container width and even then, end content won’t show up fully). Otherwise, content placed at the far ends of the container are half-showing. I noticed this ‘issue’ is persistent within your example so figured my configuration is correct.

    I hope you can fix/add this functionality so UX improves to 100% when using ‘hover-precise’.

    Thanks again!

    • malihu
      Posted on November 15, 2014 at 04:05 Permalink

      Hello and thanks for the comments and feedback!

      “hover-precise” type scrolls the content based on the exact position of cursor. For a better user experience when using this type, you normally need to add a left/right margin to your first and last elements. This will make scrolling on the edges much better.

      I have a ready-to-use theme that does that automatically. Try using the “hover-full” theme (theme: "hover-full") to see what I mean. You can see its CSS on github (see /* theme: “hover-full” */).

      Let me know if this helps

      • Adi
        Posted on November 15, 2014 at 17:03 Permalink

        Indeed that worked better. However, I did like the smoothness of using ‘precise’. Is it possible to create a theme that acts like ‘full’ around the edges of the container and like ‘precise’ around the middle? I want to make scroll-ability more noticeable to the user.

        • malihu
          Posted on November 16, 2014 at 22:57 Permalink

          “hover-full” theme uses the “hover-precise” type along with few other options. However, you could simply set the type to “hover-precise” and just add the margins to the first/last elements. For example:
          #your-element-id .mTSThumbContainer:first-child{ margin-left: 40px; } #your-element-id .mTSThumbContainer:last-child{ margin-right: 40px; }

  10. edu ruiz
    Posted on November 7, 2014 at 23:25 Permalink

    hey man! thanks for the thumbnail scroller plugin! loved it!

    just wondering, there is some way to break the items in rows? I have a layout with this exigence and will be very nice have a option like “numRows”.

    there is some way? and if there is not, think is a big improvement.

    thanks again!

    • malihu
      Posted on November 8, 2014 at 00:51 Permalink


      There’s no way for the script to break list items into rows. You’ll need to create your layout that way, e.g. stacking divs or adding plugin markup inside existing list-items.

      I can’t say if I’ll implement such feature as it’s a bit off plugin scope.

      You might be able to accomplish what you need (without editing much or at all your existing HTML) by using plugin’s markup option parameter to define your own elements (see Configuration). I can’t say for sure if this would work as I’d need to see your HTML/layout.

  11. ratnesh chouhary
    Posted on September 18, 2014 at 12:45 Permalink

    i used your slider in my magento store it will working perfectly. but there is one problem is there any way to make this slider responsive

    • malihu
      Posted on October 17, 2014 at 07:44 Permalink

      See version 2.0.0 (just released)

  12. ilhan
    Posted on June 10, 2014 at 18:55 Permalink


    I have one page full of different product images. When you hover on an image you see thumbnail pictures of different colors of that products. I want to use your plugin for every image in page but only the first one works. How can i do that?

  13. paola
    Posted on May 16, 2014 at 18:47 Permalink

    Hi. I implemented the scroller and it works great, but when I create a second scroller it only displays the first 4 thumbnails and doesn’t work. Only works one scroller

    Any idea how can I have two identical scrollers? In the same page?


Comments pages: 1 10 11 12

Post a comment

Your e-mail is never published nor shared. Required fields are marked *

You may use these HTML tags and attributes:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>
You can write or copy/paste code directly in your comment using the <code> tag:
<code>code here...</code>