Skip to content

FAQ

Jump to bottom Edit New page
Mottie edited this page Dec 13, 2012 · 24 revisions

#List of FAQ

#Why do I see all of my slides vertically and nothing else?

This is what happens when there is a javascript error and the browser stops processing the code. There could be multiple reasons for this, but here are two very common problems:

  1. Trailing commas: In IE, if there is a trailing comma in the options it will cause a javascript error. Here is an example of what a trailing comma looks like (just remove it):

    $('#slider').anythingSlider({
  option1: 'value1',
  option2: 'value2', // ** TRAILING COMMA ALERT! **
});

  2. Multiple Copies of jQuery: If there are multiple copies of jQuery on a page, AnythingSlider may be loaded and associated with the first copy of jQuery. When a second copy of jQuery is loaded and a document ready function is called, the ready function is being called using the second copy of jQuery and therefore doesn't recognize the AnythingSlider plugin.

    You can see this error in the javascript console saying something like "anythingSlider is not a function". In Chrome, press Ctrl-Shift-J to open the developer tools and go to the Console tab. In Firefox, you'll need the Firebug plugin to see this. In IE, press F12 and click on the console tab.

    So, to fix this you can either remove the second copy of jQuery or assign a jQuery noConflict variable and call the plugin using that variable:

    <script src="js/jquery-1.6.min.js"></script>
<script>
var jq = jQuery.noConflict();
jq(function(){
  jq('#slider').anythingSlider();
});
</script>
<script src="js/jquery-1.4.min.js"></script>

#How do I prevent image flickering on page initialization?

This "flickering" is called the Flash Of Unstyled Content (or FOUC) and is common when css/js is kicking in during the initial page load of some websites. There are two methods you can use to prevent this:

Method 1 (Demo) - Added to Version 1.7.11.5+

Set the width, height and overflow of the UL in the css. The width and height should match the initial slider width and height. Best for those with javascript disabled. Here is an example, adjust the css width and height to match your dimensions:

CSS

#slider { height: 200px; width: 300px; overflow-y: auto; overflow-x: hidden }

HTML

<ul id="slider">
  <li><img src="http://placekitten.com/300/200" alt="" /></li>
  <li><img src="http://placekitten.com/300/200" alt="" /></li>
</ul>

Method 2 (Demo)

Hide all but the first slide. AnythingSlider will automatically show the other slides because each LI gets the "panel" class which has "display: block". This is not an optimal solution for those with javascript disabled. Here is an example:

CSS

.hide { display: none; }

HTML

<ul id="slider">
  <li><img src="http://placekitten.com/300/200" alt="" /></li>
  <li class="hide"><img src="http://placekitten.com/300/200" alt="" /></li>
  <li class="hide"><img src="http://placekitten.com/300/200" alt="" /></li>
</ul>

#I have multiple sliders, how do I make sure a specific one is active?

Each slider automatically sets itself as active (keyboard navigation controls it) when it is initialized. So the best method would be to add a snippet of code once the window has loaded, which is after all the sliders have been initialized.

Version 1.6.1+ only

$(window).load(function(){
  $('#slider').data('AnythingSlider').makeActive(); // only works in version 1.6.1+
});

Version 1.6 and older

$(window).load(function(){
  // Use the following with AnythingSlider versions 1.6 and older
  $('.activeSlider').removeClass('activeSlider'); // make sure only one slider is active
  $('.anythingSlider:eq(0)').addClass('activeSlider'); // finds the first slider, then makes it active
});

#How do I make one slide last longer during the slideshow?

Method 1 (Demo)

This code sets a "base" slideshow delay time, then adds additional time for the specific slides you choose in the "slideTimes" object. I used a very short slideshow time to make the differences more obvious.

// *** Vary slideshow time ***
var baseSlideShowTime = 500, // time in milliseconds
    slideTimes = {
      3 : 3000, // slide 3 = baseSlideShowTime + 3 seconds
      5 : 500   // slide 5 = baseSlideShowTime + 1/2 second
    };

$('#slider').anythingSlider({
  delay: baseSlideShowTime,
  onSlideComplete : function(slider){
    // make current slide last longer in the slideshow
    if (slideTimes.hasOwnProperty(slider.currentPage)) {
      slider.clearTimer(true); // stop slideshow
      setTimeout(function(){
        slider.startStop(slider.playing, true); // restart slideshow
      }, slideTimes[slider.currentPage]);
    }
  }
});

Method 2 (Demo)

Here is another version provided by Pubmem (source)

// *** Vary slideshow time ***
var slideShowDelay = 10000, // fallback
  slideTimes = {
    1 : 1000,
    2 : 2000,
    3 : 3000,
    5 : 5000
  };

$('#slider').anythingSlider({
  autoPlay : true,
  delay: slideTimes[1],
  onSlideComplete : function(slider){
    slider.clearTimer(true); // stop slideshow
    // Change delay time based on saved timings
    if (slideTimes.hasOwnProperty(slider.currentPage)) {
      slider.options.delay = slideTimes[slider.currentPage];
    } else {
      slider.options.delay = slideShowDelay;
    }
    slider.startStop(slider.playing, true); // restart slideshow
  }
});

#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

$('#slider').anythingSlider({
  stopAtEnd  : true,  // If true & the slideshow is active, the slideshow will stop on the last page.
  onShowStop : function(e, slider){
    setTimeout(function(){
      // only go to the first page if the last page is visible
      if (slider.currentPage === slider.pages) { slider.gotoPage(1); }
    }, slider.options.delay);
  }
});

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.

#Why are the contents of my slider showing properly? Why are the dimensions of my slider off?

This problem is mostly likely due to version 1.7+ now requiring the width and height of the slider to be set in the CSS.

#slider { width: 500px; height: 300px; }

Additionally, if the resizeContents option is set to false, each panel dimension needs to be set as well.

#slider, #slider li { width: 500px; height: 300px; } 
/* Define any differently sized panels */
#slider li.panel2 { width: 300px; height: 250px; }
#slider li.panel5 { width: 400px; height: 200px; }

#Why does AnythingSlider mess up in Chrome and Safari?

##Wrong Panel Height

  • When this problem occurs the slider in Chrome and Safari ends up only showing the arrow buttons and a collapsed border. This happens because those browsers initialize too fast, so that the images haven't even started loading.
  • You can fix this by:
    1. Define all of your image dimensions inline or in the css; or,
    2. Initialize the plugin inside of a $(window).load(function(){...}) instead of $(document).ready(function(){...}).

##Right-to-Left page problems Chrome & Safari also have issues when a page direction is set to right-to-left (RTL) direction. You can resolve this by either setting the playRtl option to true or using the following css (see issue #239):

/* make AnythingSlider work properly on a right-to-left page */
div.anythingSlider .anythingWindow {
    direction: ltr;
    unicode-bidi: bidi-override;
}

#Why does my AnythingSlider malfunction after X number of slides?

If the problem is when the slides are just past 10,000 pixels from the start, then it is due to a bug in jQuery, which existed prior to version 1.5. It never returned a negative left value of more than 10,000 pixels. So for a short time the plugin was changed to use scrollLeft instead of left to bypass this issue, but that also had problems (see the next FAQ entry). So, if you have this issue (brought up in issue #97), please upgrade to the newest jQuery and AnythingSlider versions.

##UPDATE: It appears the 32,766 pixel width limitation has finally been removed in Opera version 11.60 Build 1185!

If the problem occurs when the total width of all of your slides is over 32,766 pixels, then it is because of Opera's total width restriction. Any slides that overflow this width will wrap to the next line. Try this demo in Opera to see what happens. If you don't care about this issue in Opera, then you can remove this restriction by removing these lines from the "anythingslider.css" file:

/* Opera width restriction */
.anythingBase { max-width: 32766px; }

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

Update AnythingSlider to version 1.5.13+ to fix this issue! This problem was happening because older versions of AnythingSlider used scrollLeft to position the slides in the view port. When the slider was hidden, as it would be in a popup, in a tab or inside an accordion, the scrollLeft value could not be set and it defaulted to zero, the position of the last slide clone.

Add a custom footer
Clone this wiki locally