CODEWITHSUNDEEP
jqueryjscrollpane
dave
dave

Reputation: 45

Getting jQuery jScrollPane to auto scroll for a certain period on load

Hi I'm looking for a solution to make jScrollPane auto scroll on page load. I found some similar questions but they are not what I am looking for (scrollBy and scrollTo methods). I currently have the following:

$(function(){
$('.scroll-pane').jScrollPane({
showArrows: true,
autoReinitialise: true
});
});

What I want to achieve is to have my horizontal only jScrollPane scroll my contents (photographs) smoothly: 1. To the right by 300px, 2. Then scroll back to the left by 300px (back to the beginning), 3. And finally stop there.

It is also useful to have a setting that will allow me to control the smoothness/duration/interval of the scrolling.

In case you may be wondering what the use is, I wouldn't want any viewers to miss that they are supposed to scroll that area. You may view the website at: http://www.giamarescotti.com/v2/

Thank you very much in advance for any advice.

Regards, Dave

Upvotes: 0

Views: 1709

Answers (1)

Jake
Jake

Reputation: 2470

JScrollPane supports animation. You need to add animateScroll and animateDuration (in milliseconds), use scrollToX to scroll to the width of the #imagesContainer and then back to 0:

$(function(){
  var pane = $('.scroll-pane');
  pane.jScrollPane({
    showArrows: true,
    autoReinitialise: true,
    animateScroll: true, //added
    animateDuration : 10000//added - length each way in milliseconds
  });

  var api = pane.data('jsp');

  //listen to the x-axis scrolling event
  pane.bind('jsp-scroll-x', function (event, pos_x, at_left, at_right) {
    //we're at the right now lets scroll back to the left
    if (at_right)
    {
      api.scrollToX(0);
      $(this).unbind(event);//added with edit
    }
  });

  //initial animate scroll to the right
  api.scrollToX(parseInt($('#imagesContainer').width()));
});

Upvotes: 1

Related Questions