Auto scroll image (smooth) with jQuery

Question

I want to create my own jQuery animation for my wordpress site, because there is no wordpress plugin for my need, and I do not want to use the jquery plugin, it creates problems inside wordpress.

My html consists of a list of horizontal images that I just want to scroll smoothly to the left automatically (almost like displaying ads on a website that automatically scrolls)

How can I do it?

I tried the following, but the scroll is not smooth ....

Here is my FIDDLE

code:

JQuery

var w = $('#clientsSlider ul').width(); $('#clientsSlider > ul').animate({ left: -w }, 30000) 

HTML:

 <div id="clientsSlider"> <ul> <li><img src="..." /></li> <li><img src="..." /></li> <li><img src="..." /></li> <li><img src="..." /></li> <li><img src="..." /></li> </ul> </div> 

Answer 1

You can do it with

• combining your images into a .png file
• Set background image element ans, repeat (0 center)
• Animation with jQuery background-position

 (function slide(){ $('#clientsSlider').animate({backgroundPosition : '-=2px'}, 20, 'linear', slide); })(); 

 #clientsSlider{ height: 96px; background: #e5e5e5 url(http://i.stack.imgur.com/kejzw.png) repeat 0 center; margin: 0 auto; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="clientsSlider"></div> 

Combine the images into one:

^{(& copy; disclaimer: the randomly selected logos used for the purpose of this answer and the corresponding demonstration example are trademarks and property of their respective owners.)}

---

If you want to add click functionality for each logo

yes, on the background image and pause on hovering do this:

 var $sl = $('#clientsSlider'), slPos = 0, goTo = "", totW = 1254, // total image width imgMap = { /* logoEndsAtPX : "urlToFollow" */ 366 : "planet.html", 516 : "absa.html", 766 : "kumbra.html", 1051 : "bosch.html", 1254 : "samancor.html" }; function slide(){ slPos -= 1 ; $sl.animate({backgroundPosition : slPos}, 10, 'linear', slide); } $sl.hover(function(ev) { return ev.type=='mouseenter' ? $(this).stop() : slide() ; }).on('click', function( ev ) { var mX = ev.clientX - $(this).offset().left; var mFixed = (Math.abs(slPos) + mX) % totW; console.log(mFixed); $.each(imgMap, function( key, val ){ goTo = val; if(key>mFixed)return false; }); alert( goTo ); // DO WITH URL WHATEVER YOU LIKE }); slide(); // START! 

 #clientsSlider{ height: 96px; background: #e5e5e5 url(http://i.stack.imgur.com/kejzw.png) repeat 0 center; margin: 0 auto; cursor:pointer; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="clientsSlider"></div> 

Answer 2

The problem is that your duration is far-reaching. That is why it cannot be smooth. Now your animation will take 30 seconds (30000 miliseconds).

There are not enough pixels within the range of your animation to look smooth with such a length.

Answer 3

Here are some interesting plugins and examples of horizontal auto- scooters - Called Marquees

http://remysharp.com/2008/09/10/the-silky-smooth-marquee/

Fiddle example

Fiddle hover pause example:

Some code to calm the damned stackoverflow "JSfiddle links should be followed ... blabla"

 (function($) { $.fn.textWidth = function(){ var calc = '<span style="display:none">' + $(this).text() + '</span>'; $('body').append(calc); var width = $('body').find('span:last').width(); $('body').find('span:last').remove(); return width; };....see the fiddle