AnythingSlider works great for 12 slides, then starts malfunctioning

[witq]

Hi, I hope this is my last issue and I will be able to stop being a PITA :)

I have a slider that works properly untill it reaches the 12th slide. It then stops sliding to the next slide but instead jumps to the first one and then to the next one (12 -> 1 -> 13 instead of 12 -> 13). I tried checking it in Firebug, bot got no errors. I also checked if the combined slider width isn't more than 32766 pixels. The only curious thing I noticed when watching the DOM was that when the slider initialized it added the currentPage class to the second panel but showed the first one. I have been using multiple versions of the script during the past weeks and I'm sure it worked fine in version 1.5.10 (just checked). I went back to that version but it would be cool if you could fix it.

Cheers,
Witek

[Mottie]

Hi Witq!

I attempted to duplicate the problem by adding more slides to the simple.html demo, but it worked just fine. Can you please share the settings you were using. Also the 32766 width restriction is only for the Opera browser - but I'm not sure about the mobile versions.

[witq]

Here's my config:

$("#slider").anythingSlider({
            startPanel      : 1,
            width: 920,
            height: 434,
            resizeContents: true,
            hashTags            : false,
            animationTime       : 750,
            easing              : "easeInOutExpo",
            autoPlay            : true,
            startStopped        : true,
            infiniteSlides      : false,
            toggleArrows        : false,
            enableKeyboard      : true,
            stopAtEnd       : true,
            onInitialized : function(slider){
                $("#sliderPortfolio .anythingSlider").addClass("acceptKeyboard");
            }
        });

In case you're wondering, the bit:

onInitialized : function(slider){
    $("#sliderPortfolio .anythingSlider").addClass("acceptKeyboard");
}

was added after the problem occured so it's not the cause. I added it to make one particular slider (there are two on the page) get keyboard focus. Maybe you know a little less stupid solution?

Also, do you guys accept some kind of donations? I really appreciate the support.

[Mottie]

Hmm, I still can't seem to duplicate the problem - demo

And I don't think any of us have a donation button on our sites, so maybe donate to your favorite charity or pass on the help to others :)

[Mottie]

Oh and if you wanted to make an AnythingSlider have keyboard focus, just make it the last one to be initialized, or use this code snippet:

$('.activeSlider').removeClass('activeSlider'); // make sure only one slider is active
$('.anythingSlider:eq(0)').addClass('activeSlider'); // finds the first slider, then makes it active

or if you want it in the onInitialized function (but this make not work if other sliders are initialized after it):

onInitialized : function(slider){
 $('.activeSlider').removeClass('activeSlider'); // make sure only one slider is active
 slider.$wrapper.addClass('activeSlider'); // finds the first slider, then makes it active
}

[jennsteinhauer]

Hello,

Was a solution found for the issue noted in the original post? I am actually having the exact same problem and am going blind from poring over all the code seeking the answer.

Thanks!

[Mottie]

Hi Jennsteinhauer!

I can't seem to reproduce the problem so I'm not sure where to start looking. Is it occurring in a particular browser? What version are you using? What settings are you using? And how many slides are inside (need the width of each too)?

[jennsteinhauer]

Hi Mottie,

It's occurring in Firefox, Internet Explorer and Safari, as well as my iPhone Safari application. You can see it in action at this link:

184.154.189.98/~tbolinsk/

It starts doing it after the photo of the baby with the bear ears on, which is the 12th image. The width of the images is 600px max, and the slider panel width is set to 980px. There are 23 images in total in the slider, and it does this on every single one after 12, until it wraps back to the 1st image, then it works again until the 12th.

Thanks. :)

[Mottie]

Hi Jennsteinhauer!

It appears you are using jQuery Coda Slider and not AnythingSlider. I don't have the time to trouble shoot the problem with that slider, but from what I see that slider code is loaded twice. Once from the plugin directory (plugins/wp-coda-slider/) which includes the jquery.easing.js script and the other in the theme scripts (/themes/tbolinski/scripts/).

Might I suggest that since you are already using jQuery Cycle or NextGEN Gallery, to use one of those instead of coda slider? Or if you are so inclined, switch to AnythingSlider :)

[Rasped]

Check this page out.
http://catillo83.net.catillo.dk/da-DK/Kopi-af-Fotograf.aspx?Purge=True

I have tried with so many version of anythingslider, and I get into trouble after around 10 items.

[Mottie]

@RasmusHoegPederson!

Ok the problem you are having is two-fold.

1. The first is that your slider is about 56k pixels wide, so you'll need to set the maxOverallWidth to a bigger number, but please note that the slider won't work properly in Opera because of the width restriction.

   $("#slider1").anythingSlider({
   // loopAtEnd:true, // this is not a real option
   width:920,
   height:400,
   delay:4000,
   buildArrows:false,
   buildNavigation:false,
   toggleControls:false,
   maxOverallWidth: 99999
   });

2. Your site is using jQuery 1.4.4. This older version of jQuery won't allow animation to start with very large negative numbers (bug ticket). So please upgrade to a newer jQuery version.

[Rasped]

Hi Mottie

I upgraded to the latest jquery version hosted at jquery.

When I look at the website in Chrome, I can see that the containing UL gets the class "anythingBase".
And monitoring this elements in chrome shows me that once the "left" element of the style goes over 11000 it goes to 0 and then eases to the new value. So it seems there is something in the calculation of the "left" in the style when using very wide slideshows.

[Mottie]

The demo page no longer exists... does the slider still behave abnormally and did you clear your cache? It sounds like you might still be using the older version of jQuery.

[Rasped]

http://www.juulfotografi.dk/da-DK/Fotograf.aspx

[Mottie]

It looks like jQuery 1.4.4 is still being loaded:

  <!-- Anything Slider -->
<link type="text/css" href="/files/system/anythingslider/css/anythingslider.css" rel="stylesheet" media="screen" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>

<script type="text/javascript" src="/files/system/anythingslider/js/jquery.anythingslider.js"></script>

[Mottie]

I added this as a FAQ, so I'm going to go ahead and close this issue... solution: please upgrade jQuery to version 1.5+