Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP

Loading…

Images out of order in slider #1014

Closed
awakencompany opened this Issue · 29 comments
@awakencompany

Hi - I'm currently using FlexSlider on a custom Shopify store that a fellow creative company and myself are building. Everything is working well as far as design, and the bulk of the functionality.

However - The images are out of order (see here on the homepage: http://four-flours.myshopify.com). I have them in order within the source code like so:
< img src ="slideshow1" >
< img src ="slideshow2" >
< img src ="slideshow3" >
< img src ="slideshow4" >

However, it's outputting them with #4 at the very beginning.

Also, the "randomize" function is NOT turned on. Any ideas what's going on here?
Thanks for any support on this issue.

  • Anthony | Awaken Company
@davidlaietta

I can second this bug

@timbouchard

thirded, the only way to fix the order is to turn off animation: "slide" which defeats the purpose of declaring slide animation

@awakencompany

I'm glad to hear i'm not the only one seeing this issue (even that makes at least 3 of us in the same boat).

Tim: That's good that there's at least some way of making it appear in the correct order. But that is way weird and not a practical fix.

Hopefully someone will come along and offer a bit of advice to fix this, it's a great plugin - just gotta get this little bug smashed.

@steviehype

I had to downgrade to version 2.2.1 and it works again.

@pandalion

I have this issue too, please fix it :(

@awakencompany

StevieHype - I noticed on another site someone had to downgrade a version for this to work. I'm going to give this a shot now. If I find a solution on this as well i'm going to update this post so others can benefit from it.

@mbmufffin
Collaborator

Something appears off with the cloning. If you set animationLoop: false, does the source order work as intended?

I haven't looked at the code in a while, so I'll have to check out any sort of updates that were made to alter the code.

@mbmufffin mbmufffin closed this issue from a commit
@mbmufffin mbmufffin Fixes #1014
Apr 08, 2013
dominic-p added commit #30141e6d3b

Dec 13, 2013
mattyza commits #0d43ffbf13 without addressing merge conflict message.
This merge conflict contained the issue.

Dec 19, 2013
Shelob9 commits #b52bea1974 to remove the merge errors text from the
minified script, fixing the syntactical error, but leaving logical
errors in place.
7ecc526
@mbmufffin mbmufffin closed this in 7ecc526
@mbmufffin
Collaborator

I tracked down the source of this issue. Please pull down the latest source and minified code to see the issue fixed. This was definitely a bug, and thank you to @awakencompany for bringing it to my attention on Twitter.

Cheers

@pandalion

@mbmufffin thanks for fixing this! :)

@awakencompany

Tyler - This got it super close on my end with the revised "jquery.flexslider.js" file fix. Still use this page as reference: http://four-flours.myshopify.com and here's the .js file: http://cdn.shopify.com/s/files/1/0315/9969/t/5/assets/jquery.flexslider.js?5892

• I commented out line 874-876 and that resolved the cloning. But then I had to go to lines 870 & 871 to further edit it so it wouldn't put them out of order. This works great during the first loop through the slideshow. But then when it repeats it skips the 1st image, and puts the second in it's place. Any ideas what's going on here?

Thank you again for your help on this issue, i'm really appreciative - as i'm sure a lot of other people are as well!

@mbmufffin
Collaborator

@awakencompany Can you set the flexslider.js code back to the code I just pushed? I'd like to see the broken behavior without the edits you made.

@awakencompany

Absolutely @mbmufffin - The update is right in here, correct: https://github.com/woothemes/FlexSlider/blob/master/jquery.flexslider.js ?

(i'm new to Github, so i'm getting the hang of the file structures and whatnot)

@mbmufffin
Collaborator

@awakencompany Yep. That's the one.

@awakencompany

Perfect! Got it changed out just now, @mbmufffin

@mbmufffin
Collaborator

@awakencompany Looks to be working as intended, yeah? :)

@awakencompany

@mbmufffin - Hmm, it's still for some reason showing the first slide last for me in Google Chrome. What browser were you seeing it again? (edit: for some reason it's only showing the last slide first on the first loop through....on the second loop through the slideshow it puts it first - don't know if that helps to distinguish anything that's going on on my end.)

(also, again - i really do appreciate your attention to this)

@mbmufffin
Collaborator

@awakencompany Hm, yeah, now it's not working on the initial load for me either. It looks like your slider's initial X start value is 0, when it should be -960px (the size of one slide).

@mbmufffin
Collaborator

@awakencompany I'm really not sure what is going on with the initial load of your page. I took your markup and JS/CSS files into a JSFiddle. Everything is working correctly there:

http://jsfiddle.net/dX9hL/1/

I'm thinking that the FlexSlider code is working as intended now, but the rendering if your page is causing some sort of complication, on page load. It's hard for me to identify exactly what the issue is, though, through the inspector.

@awakencompany

Thanks again for checking into it @mbmufffin - There's so much JQuery stuff flying around this particular site, so it's good to know at least now that the slider code is functioning correctly (I plan to use it in other projects, love how easy it was to setup & adapt to the project). I'll cruise around the site and see if I can figure out what's conflicting with the slider too.

Thank you again for the support on this one, man! You've built an excellent slider, so i'm glad this little issue is fixed for future use :)

@mbmufffin
Collaborator

@awakencompany I'm sorry I couldn't help pinpoint the answer, but you're very welcome. Thank you for bringing this bug to my attention! :)

@awakencompany

Oh, no worries at all @mbmufffin - Just stoked that this plugin is squared away now :) Have a great day, sir!

@scottsilvi

@awakencompany did you ever resolve this on your end? I'm experiencing the same thing on Chrome. I'm using Flexslider with Picturefill for responsive images. Only in chrome, the last slide gets cloned, inserted into first position, and the slideshow starts there. If I remove animation: "slide", it works just fine.

@awakencompany

@scottsilvi - I never could get it to resolve on that particular site. I think there were some other jQuery issues that limited it from working correctly. I ended up going with something else to resolve everything on that site.

I do plan to use this slider in some other sites though and roll with what @mbmufffin has suggested in this post. I'll probably integrate the slider very early on in development to make sure I start with a minimal amount of coding so I can make sure everything is not becoming a mess.

@will-hancock

Any plans for this fix going into a release? Its Aug14, This fix was made in Feb14, last release was Dec13... I pulled the download recently from the Library homepage download button... have to say it was a pain to dig out the issue by googling, reading all the comments, finding the commit where the change was made and then correcting my local copy that I had bespoked....

... Other than that, AWESOME Library, really love it!!!

@kty kty referenced this issue from a commit in kty/FlexSlider
@mbmufffin mbmufffin Fixes #1014
Apr 08, 2013
dominic-p added commit #30141e6d3b

Dec 13, 2013
mattyza commits #0d43ffbf13 without addressing merge conflict message.
This merge conflict contained the issue.

Dec 19, 2013
Shelob9 commits #b52bea1974 to remove the merge errors text from the
minified script, fixing the syntactical error, but leaving logical
errors in place.
067bdde
@neonics

I just checked the master branch (as there's no release > 2.2.2), and it's not fixed.

Here's a diff against 2.2.2 that fixes it, although it could be done more properly:

--- woothemes-jquery.flexslider-2.2.2/jquery.flexslider.js  2013-12-20 17:40:32.000000000 +0100
+++ jquery.flexslider.js  2014-11-16 14:25:14.737885130 +0100
@@ -832,6 +832,7 @@
               }
             }());

+            posCalc += slider.itemW * slider.cloneOffset;
             return (posCalc * -1) + "px";
           }());

@@ -889,9 +890,10 @@
           }, (type === "init") ? 100 : 0);
         } else {
           slider.container.width((slider.count + slider.cloneCount) * 200 + "%");
-          slider.setProps(sliderOffset * slider.computedW, "init");
+          //slider.setProps(sliderOffset * slider.computedW, "init"); // computedW is 0 here
           setTimeout(function(){
             slider.doMath();
+            slider.setProps(sliderOffset * slider.computedW, "init");
             slider.newSlides.css({"width": slider.computedW, "float": "left", "display": "block"});
             // SMOOTH HEIGHT:
             if (slider.vars.smoothHeight) methods.smoothHeight();
@premitheme

The same as @neonics
I use the latest version and have the same problem. animationLoop: false solves the problem temporarily.

@se-dev

@neonics i edited my flexslider.js but with your setup the slider will start with the second slide

when do you think this will be released?

@wolfflow84

@mbmufffin by setting .flexslider to display:block should solve the problem.
Because i faced the issue when i set .flexslider to display:inline-block.

@hbunjes

If I only use the second part of @neonics fix (after @@ -889,9 +890,10 @@) it works fine for me.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.