javascriptjqueryanythingslider

AnythingSlider FX Issues

I am trying to use various FX with AnythingSlider (left, right, & fade specifically in this case) & running into some issues. With all slides set to the 'Fade' FX everything seems to work correctly (see link below):

http://dl.dropbox.com/u/12310886/Work/anythingslider/slide_fade.html

However, with all slides set to either the 'Left' or 'Right' FX the slides get out of sync as it rotates (see links below):

http://dl.dropbox.com/u/12310886/Work/anythingslider/slide_left.html http://dl.dropbox.com/u/12310886/Work/anythingslider/slide_right.html

Any idea on what's going on?

Thanks in advance!

Solution

  • The problem is that the entire panel is being animated. So when the last, or next depending on the direction, panel is moved out of view, it actually end up overlapping the current panel. So you have two options:

    1. Wrap the contents of the panel in an element and target it for animation. The reason this will work is because the panel itself has an overflow:hidden property applied to it so the contents won't overlap other panels.

      <div class="left">
  <div class="content-wrapper"> <!-- add this content wrapper -->
    <div class="caption"></div>
    <img src="../slide1.jpg" alt="" />
  </div>
</div>

    2. Add .activePage { z-index: 1; } to your css. This works because the current panel will always be on top. The main problem with this solution is that you'll see the other panels oddly moving around in the background.