This website uses cookies to personalise ads and to analyse traffic ok
web design

jQuery thumbnail scroller

Changelog

  • Aug 5, 2015
    • Updated plugin to version 2.0.3
    • Fixed issue: https://github.com/malihu/thumbnail-scroller/issues/5 regarding Chrome browser on Android.
    • Minor optimizations on auto-update function.
  • Apr 2, 2015
    • Updated plugin to version 2.0.2
    • Fixed a bug that prevented onInit callback triggering on elements that didn’t require scrolling.
  • Dec 3, 2014
    • Updated plugin to version 2.0.1
    • Updated/fixed various script private functions.
  • Oct 17, 2014
    • Updated plugin to version 2.0.0
    • Plugin script completely re-written to support multiple selector types, option parameters and methods.
    • Removed jQuery UI dependency (plugin does not require jQuery UI anymore).
    • Extended scroller types and related options (speed, axis etc.).
    • Optimized all js animation tweens for better performance.
    • Added support for touch-enabled devices.
    • Added some advanced parameters for auto-updating the scroller on element and content resize (fixed all related issues).
    • Added user defined custom callback functions.
    • Added the following methods: update, scrollTo, stop, disable, destroy
    • Plugin license changed from GPL/L-GPL to MIT.
  • Oct 8, 2011
    • Changed anchors css display property to block and added float:left; (instead of display:inline-block;) to avoid extra whitespace between thumbnails.
  • May 30, 2011
    • Plugin is greatly upgraded by the addition of new features and updated to be conflict-proof with other js libraries and scripts by changing css class names, thumbnailScroller function calling, jquery.thumbnailScroller.js and by adding jQuery.noConflict();.
    • Added 2 more scrolling types (3 total): an additional scrolling via mouse movement and a new scrolling type via next/previous buttons. The 3 types of scroller are: “hoverPrecise”, “hoverAccelerate” and “clickButtons”.
    • Added auto-scrolling feature.
  • Feb 23, 2011
    • Automatically setting content width for horizontal scrollers is no longer calculated via javascript. Instead of using jQuery .each() or for statements, the width is now set by adding an additional div (.horWrapper) that wraps content and by setting the display of .container div to inline, thus expanding its width automatically (check the updated css file for details).
  • Jan 1, 2011
    • Modified the plugin to scroll images with different widths horizontally.
  • Nov 29, 2010
    • Created a plugin out of the original script for easy implementation, configuration and multiple scrollers on a single page.
    • Minor code fixes and enhancements.
  • Nov 26, 2010
  • Oct 18, 2010
    • Brad Mace added some code to increase the left and right margins of the thumbnail scroller in order to be easier to get the first and last thumbnails all the way on the screen, without having to move the mouse to the very edge. Script updated 🙂 thanks Brad!

Plugin home

 

Pages: 1 2 3


753 Comments

Post a comment

Comments pages: 1 12 13 14

  1. Manmal
    Posted on January 29, 2023 at 05:26 Permalink

    Great code!

    Reply
  2. yaron
    Posted on May 14, 2022 at 18:44 Permalink

    Hello,

    there seems to be a problem with jQuery v3.6.0
    When page is loaded, I get e.typeof is undefined.
    The workaround that was to install the following:

    Is there any plans to upgrade the jQuery thumbnail scroller to fully support jQuery v3.6.0 and above ?

    Reply
  3. krushna
    Posted on September 13, 2019 at 08:02 Permalink

    hi
    i was searching a vertical scroller and got your code. thanks a lot.
    i have one question. how can i show content/text on right side when i click on the thumbnail. is it possible?

    Reply
  4. sandy
    Posted on January 9, 2019 at 12:40 Permalink

    Hi, Nice & Informative article. Web designing company in Hyderabad is one of the best practices nowadays most of the organizations from startup to big brands are using. It’s very helpful in showcasing our business to the right person in right time. Very nice article. Found informative for me.

    Reply
  5. Carla
    Posted on September 28, 2018 at 18:00 Permalink

    Hi… Thank you so much for your plugin. You have no idea how you’ve saved me. It works great. But I was wondering… is it possible to also make the thumbnails scroll by using the mouse-wheel, that is, in addition to the hovering over the edges??

    Kind regards,

    Carla.

    Reply
  6. Hassan
    Posted on September 11, 2018 at 15:49 Permalink

    Hey Guys!
    Any idea how to implement this in a Shopify store? I know I have to add the jv and css files in the assets but what should I do next?

    Please help

    Reply
  7. Tri Bagus Soleman
    Posted on May 18, 2018 at 10:10 Permalink

    Why I can’t load data if my data more than 21 data from database ?

    Reply
  8. Repl Rex
    Posted on January 9, 2018 at 17:02 Permalink

    Trying to figure out how to change the scroll speed. Integer and ‘scrollSpeed’ do not work for me. Any ideas? I am changing it in jquery.thumbnailScroller.js file. Thanks in advance.
    It’s 2018 btw, not sure what changes have been made in the last couple years to warrant any code not working.

    Reply
  9. genius
    Posted on September 30, 2017 at 23:20 Permalink

    how can do that slider will auto-scroll

    Reply
  10. Maulik Patel
    Posted on June 8, 2017 at 15:34 Permalink

    Harsh Prajapati

    Reply
  11. kaji
    Posted on February 7, 2017 at 08:53 Permalink

    Can we stop scrolling on mouse click or hover wherever we need.

    Reply
  12. Ameen Shan
    Posted on February 6, 2017 at 21:02 Permalink

    Hi,
    Great plugin,Working perfectley ,
    Is it possible to add multi[le scrolling methord for a single id.

    like both click and hover
    $(“#my-thumbs-list”).mThumbnailScroller({
    axis:”y” ,//change to “y” for vertical scroller,
    type:”hover-50″,
    contentTouchScroll :50
    });

    $(“#my-thumbs-list”).mThumbnailScroller({
    axis:”y” ,//change to “y” for vertical scroller,
    type:”click-50″,

    });

    Reply
  13. Alex
    Posted on December 5, 2016 at 20:48 Permalink

    .mTS_horizontal .mTSContainer { margin-left: auto !important; margin-right: auto !important; }

    Reply
  14. Alex
    Posted on August 16, 2016 at 06:49 Permalink

    Malihu, thank you for such a great js plugin!

    I have only a small issue: can’t center thumbnails if their overall width is less than of the container. So they are aligned to the left.

    If I’m not blind (don’t see in config section) and such feature is not implemented in this version of the plugin, I’m requesting such feature in new releases! 🙂

    Yes, this can be achived with callbacks-counting-offset, but it becomes complicated.

    What do You think, Malihu?

    Reply
    • Matthew
      Posted on October 19, 2017 at 23:06 Permalink

      Old comment I know, but wanted the same thing. Simply css your img to be display:block and margin:auto.

      img {
      display: block;
      margin: auto;
      }

      Reply
  15. Hills
    Posted on August 10, 2016 at 08:22 Permalink

    hi Thanks for this great Job!
    I want to scroll a grid box of 15 list items and display 9 list items first and 6 list item… when scroll is activated.
    Can u help me please

    Reply
  16. sap netweaver training in hyderabad
    Posted on August 1, 2016 at 15:25 Permalink
  17. Hyginus
    Posted on June 28, 2016 at 07:33 Permalink

    Hi this is a great script for me. please could you explain how I can get this to work on desktop using hover and same time on Mobile using touch

    Reply
    • malihu
      Posted on June 28, 2016 at 09:33 Permalink

      The plugin works with regular mouse and touch (you don’t have to do anything). In touch devices you just touch swipe thumbnails. Do you have a particular issue with a device?

      Reply
      • Ashish
        Posted on August 2, 2016 at 12:30 Permalink

        The scroller goes on infinite scroll on touch devices. It won’t stop at the end of the list but keep on scrolling white no any elements inside, just white background.

        Reply
  18. Alek
    Posted on June 8, 2016 at 15:41 Permalink

    Hi!
    Great plugin!

    Have a question about optimalization. When I use a multilevel thumbnails grid to move entire website from left to right there is a problem with smothness. There’s little of shaking. When I use 32gb ram, i7 pc its works fine but in regular pc’s there is a problem with that. Have any suggestion?:)

    Regards,
    Alek

    Reply
  19. Daan
    Posted on April 21, 2016 at 23:01 Permalink

    If wanted to initially scroll to the middle of thumbnail (or other) content, how would i do that? element.scrollLeft(n) doesnt seem to work and seems to be overwritten?

    My div is 5000 px wide and i want to initially show it @ 2500 px.

    Reply
  20. Marc
    Posted on April 11, 2016 at 13:30 Permalink

    Hi, thanks for this great script.

    But I have a question: Is it possible, that the images are continuing scrolling while holding down the mouse button over the arrows instead of clicking the button?

    Reply
  21. Marcin
    Posted on March 1, 2016 at 10:51 Permalink

    Hi,
    how to turn on infinitve scrolling?

    Reply
  22. Nadir Latif
    Posted on February 11, 2016 at 14:40 Permalink

    Excellent plugin. It works well. I used it to implement horizontal scrolling playlist for JWPlayer 7. See screenshot: http://pakjiddat.com/wp-content/uploads/2016/02/jwplayer-integration-750×410.png.

    Thanks for your plugin.

    Regards,
    Nadir Latif

    Reply

Comments pages: 1 12 13 14

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>
You may also use the data-lang attribute to determine the code language like so:
<code data-lang-html>, <code data-lang-css>, <code data-lang-js> and <code data-lang-php>

css.php