Question

I am trying to build two sliders on the same page, each with its own prev/next control pane.

The tricky part: when a user clicks on any of the controllers, both sliders have to slide in the respective direction.

I have read the FlexSlider’s documentation but it I’m not sure whether it’s achievable with its properties/API.

Has anyone tried this or know better sliders for this job?

Thanks.

Answer 1

I managed to do it, wasn’t that hard after all.

Basically I used this solution: Flex Slider – How to add same controls for two sliders but adapted on prev/next buttons only.

$('a.nextButton').click(function() {
                            $('.flexslider').show();
                            var totalSlides = slider.count-1;
                            var currSlide = slider.currentSlide;
                            if (currSlide != totalSlides){
                                var next = currSlide+1;
                                slider.flexAnimate(next);
                            }
                            else{
                                next = 0;
                                slider.flexAnimate(0);
                            }
                        });
$("a.prevButton").click(function(){
                            $('.flexslider').show();
                            var currSlide = slider.currentSlide;
                            if (currSlide !== 0){
                                var prev = currSlide-1;
                                slider.flexAnimate(prev);
                            }
                            else{
                                prev = slider.count - 1;
                                slider.flexAnimate(prev);
                            }
                        });
                    }
                });