Automatic image scroll (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 a jquery plugin, it creates issues inside wordpress.

My html consist of a list of horizontal images, that I just want scroll smoothly to the left, automatically (almost like a website ad display that scrolls automatically)

How would I do this?

I tried the following, but the scrolling 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 by

• merging your images into 1 .png file
• Set image ans element background, repeated (0 center)
• Animate with jQuery the 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>

Merge your images into a single one:

^{(©disclaimer: The randomly picked logos used for the purpose of this Answer and related Demo Example - are trademarks and in property of their respective owners.)}

---

If you want to add a click functionality to every logo

yes, on a background image, and pause on hover do like:

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 to high. Thats why it can't be smooth. Your animation now takes 30 seconds (30000 miliseconds) to be finished.

There are not enough pixels inside the range of your animation to look smooth with a that long duration.