FAQ

Wiki Pages: Home | FAQ | Setup | Usage ( Appearance , Navigation , Slideshow , Callbacks & Events , Interactivity & Misc ) Change | Credits

AnythingSlider is starting from the last panel instead of the first. How do I fix it?

The problem is happening because AnythingSlider uses `scrollLeft` to position the slides in the viewport. When the Slider is hidden, as it would be in a popup, in a tab or inside an accordion, the `scrollLeft` value cannot be set and defaults to zero. So, here are three methods and an example on how to reset the correct panel position. This code must be called when the slider is visible.

1. Instantly position the slider. This method may not work if the `resizeContents` option is set to false because panel width will vary.

var s = $('#slider1').data('AnythingSlider');
s.$window.scrollLeft( s.$window.width() + s.easingMargin );

2. Animate into a specific slide

$('#slider1').anythingSlider(1);

3. Animate into the current slide

var s = $('#slider1').data('AnythingSlider');
s.gotoPage( s.currentPage );

Here is an example of an AnythingSlider that is used with a Facebox popup:

$(document).bind('reveal.facebox', function() {
  // go to first slide
  $('#facebox .anythingBase').anythingSlider(1);
});

How do I get the slider to play through my slides, then return to the first one and stop?

You’ll need the AnythingSlider version 1.5.10 or newer to get this to work because of a bug in older versions. Include the following options when initializing the script

$('#slider1').anythingSlider({
  width      : 800,   // Override the default CSS width
  stopAtEnd  : true,  // If true & the slideshow is active, the slideshow will stop on the last page.
  onShowStop : function(e, slider){
  setTimeout(function(){
      if (slider.currentPage === slider.pages) { slider.gotoPage(1); }
    }, 5000);
  }
});

Basically this script sets the `stopAtEnd` option to stop the slideshow at the end. The script also uses the `onShowStop` callback function to work, but this callback occurs as soon as the slider starts animating to the last slide. So we’ll need to set a timer to give the user time to read or look at the last slide (5000 milliseconds in the example above; adjust as needed). Lastly, inside the timer we need to check to make sure the slider is on the last page, in case the user moved away from it or stopped the slideshow early.