Jquery Flexslider Hide Slider But Retain Visibility Of Manual Controls

I'm effectively trying to have the FlexSlider be hidden, except for some controlling thumbnails. When the thumbnails are clicked, the FlexSlider fades in and slides to the appropri

Solution 1:

I've been doing something on a client site that sounds very similar to the effect that you're trying to achieve. I started off on the same route you have with the external controls method but that didn't give me quite enough flexibility.

My solution was to do the following (sorry - would have forked your jsfiddle but figured this would be quicker and cleaner.

First set up markup:

<arel="0"class="slide_thumb"href="#">slide link 1</a><arel="1"class="slide_thumb"href="#">slide link 2</a><arel="2"class="slide_thumb"href="#">slide link 3</a><divclass="flexslider"><ulclass="slides"><li><imgsrc="demo-stuff/inacup_samoa.jpg" /><pclass="flex-caption">Captions and cupcakes. Winning combination.</p></li><li><ahref="http://flex.madebymufffin.com"><imgsrc="demo-stuff/inacup_pumpkin.jpg" /></a><pclass="flex-caption">This image is wrapped in a link!</p></li><li><imgsrc="demo-stuff/inacup_donut.jpg" /></li><li><imgsrc="demo-stuff/inacup_vanilla.jpg" /></li><li><imgsrc="demo-stuff/inacup_vanilla.jpg" /></li></ul></div>

Note the rel attribute on the links - we'll use them below. Also note that the values start from 0 - this matches the values for the slides (e.g. the first slide is 0, the second is 1 etc).

You should set the visbility to none on the flexslider div in your css. (a more accessible way to do this would be to hide the slider offscreen using absolute positioning and bring it back into view on request but in the interests of keeping things simple I'll just stick to show/hide)

Next set up your call to the flexslider plugin:

<scripttype="text/javascript"charset="utf-8">jQuery(document).ready(function($) {

    $('.flexslider').flexslider({
        animation: "slide",
        slideshow: false,
        animationLoop: false,
        directionNav: true,
        slideToStart: 0,
        start: function(slider) {
            $('a.slide_thumb').click(function() {
                $('.flexslider').show();
                var slideTo = $(this).attr("rel")//Grab rel value from link;var slideToInt = parseInt(slideTo)//Make sure that this value is an integer;if (slider.currentSlide != slideToInt) {
                    slider.flexAnimate(slideToInt)//move the slider to the correct slide (Unless the slider is also already showing the slide we want);
                }
            });
        }

    });

});
</script>

This should show your slide when the user clicks on one of your links and also move the slider to the right position. This is just a starting point and I should point out this this is a very stripped down version of the code I'm using so this is basically untested as is. Should give you a decent platform to work from though. Shout if you run into problems