Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP

Loading…

Bug with slider w/thumbnail slider #655

Closed
Bodhiz opened this Issue · 13 comments

7 participants

@Bodhiz

With Flexslider 2.1 I experiment an issue with slider w/thumbnail slider.
The second item in the carousel serving as nav for the main slider never receives the class "flex-slide-active" if you navigate forward with the main slider. The class is only applied if you navigate backward or if you click directly on the thumbnail in the carousel.

Edit : The issue seems to occur also with Flexslider 2.0 as the demo (using v 2.0) is not working properly as well http://flexslider.woothemes.com/thumbnail-slider.html

Thanks for this great slider !

@imarkdesigns

Ok, after some project development i noticed this bug at Slide with Thumb Slider. I noticed that when you are in full screen and tried to navigate the next button to 2nd slide, the 2nd thumb is not being highlighted not like the other thumbs, unless you go back and it will be activated/highlighted.

2nd noticed, it will be highlighted only if the browser size was like 3/4's of the original full screen browser size. This issue was seen at Demo page and experienced while integrating it to my project.

@matchboxhero

I am having the same problem is there a fix for this?

I have noticed its that the class is not getting applied to the second slide which is causing the problem.

@Bodhiz

What Flexslider version are you running ?
I updated to 2.1 and the issue doesn't occur any longer.

@matchboxhero

Thanks for your quick reply.

I'm using 2.1, very odd. Below I have posted the code I'm using to implement it, doesn't seem to be anything wrong that is obvious.

$(window).load(function() {
$('#productSliderThumbs').flexslider({
animation: "slide",
controlNav: false,
animationLoop: false,
slideshow: false,
itemWidth: 90,
itemMargin: 5,
asNavFor: '#productSlider'
});

$('#productSlider').flexslider({
animation: "slide",
controlNav: false,
animationLoop: false,
slideshow: false,
sync: "#productSliderThumbs"
});
});

As was said in the first post this is also happening on the flexslider demo; http://flexslider.woothemes.com/thumbnail-slider.html

@imarkdesigns

@matchboxhero hello, can you try to disable the asNavFor ? then check if the thumbs still following the productSliderThumbs slider? just a test to see if we have the same output and issue.

@matchboxhero

@imarkdesigns Hi, yeah the slider is still moving when the images in the slider above are moving but theres no classes being added.

@imarkdesigns

@matchboxhero can you provide sample so I can see how was it done.
Here's my output when I post my issue also. But, after i removed that asNavFor, everything went fine. Not exactly sure why, but I still need to find why is still occuring.

http://philihardware.com/dev/
Here you can see the thumb as main images with description/slogan, and the full background was the main slider, and the arrow nav was main slider control.

@imarkdesigns

Yeah I admit, i was confused why it is not working properly in your site project. When I get a chance, i will re-test again this slider.

@matchboxhero

@imarkdesigns No worries, Thanks alot for your help :)

@Bodhiz

@matchboxhero
That's weird, I don't remember how I get ride of this problem. Except upgrading to 2.1 I don't see any explanation.
Maybe you can have a look on a page where I implemented the slider w/thumbnail slider : http://bit.ly/1e7JIcx

And here is the code related :

$('#camping-detail-carousel').flexslider({
animation: "slide",
controlNav: false,
animationLoop: false,
slideshow: false,
asNavFor: '#camping-detail-slider',
itemWidth: 180,
itemMargin: 5,
minItems: 2,
maxItems: 4
});

$('#camping-detail-slider').flexslider({
animation: "slide",
smoothHeight: true,
controlNav: false,
video: true,
animationLoop: false,
directionNav: true,
slideshow: false,
sync: "#camping-detail-carousel",
start: function(slider) {
positionDirectionNav();
}
});

Hope this help. Good luck.

@artemkolotilkin

I have the same issue as well. Just tried to upgrade to version 2.2 but it didn't help. Will be looking further, but if anyone has any insight that would be great.

Thanks!

@Web-Evt

It seems there's a problem in slider.canAdvance() function. The problem is that slider.pagingCount contains wrong value if slider.count != slider.visible. In fact it contains the number of slides that are not visible. I think it is not right to use slider.pagingCount variable in the slider.canAdvance() function, but use just slider.count.

The problem is in this condition:

(asNav && slider.currentItem === 0 && target === slider.pagingCount - 1 && slider.direction !== "next")

.. because it can return true because slider.pagingCount can contain wrong value (1,2,3 visible slides). So it should be replaced with this:

(asNav && slider.currentItem === 0 && target === slider.count - 1 && slider.direction !== "next")

So the whole slider.canAdvance() function will look like this:

        slider.canAdvance = function (target, fromNav) {
            // ASNAV:
            var last = (asNav) ? slider.count - 1 : slider.last;

            return (fromNav) ? true :
                (asNav && slider.currentItem === slider.count - 1 && target === 0 && slider.direction === "prev") ? true :
                    (asNav && slider.currentItem === 0 && target === slider.count - 1 && slider.direction !== "next") ? false :
                        (target === slider.currentSlide && !asNav) ? false :
                            (vars.animationLoop) ? true :
                                (slider.atEnd && slider.currentSlide === 0 && target === last && slider.direction !== "next") ? false :
                                    (slider.atEnd && slider.currentSlide === last && target === 0 && slider.direction === "next") ? false :
                                        true;
        }

And here is the patch for this:
http://goo.gl/HPvkVg

It works for me, but futher testing is needed. Please tell if my logic is wrong and it causes other errors..

Regards

@motoyugota

Any update on this? The issue is clearly visible even on the demo at http://flexslider.woothemes.com/thumbnail-slider.html

When you go from the first to second items via the nav arrow, the corresponding thumbnail is not selected, but if you move from second to third (or any other next/previous call) it works fine.

@jeffikus jeffikus closed this
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.