Flex-slider is hands-down, one of the most widely used responsive sliders in web-design today. Created by Woo-Themes, the scalable slider handles screen-widths elegantly, scaling to meet each screensize. One of the few issues you’ll run into when implementing flex-slider in your designs is the javascript flex-direction-nav. The small arrows that allows your user to navigate previous and next on your slider are generated on-the-fly via Fled-slider’s javascript. So, how do you move arrows OUTSIDE of the flexslider div? Easy, it’s built into the plugin.

Within the jquery.flexslider.js file, near the bottom, below the function parameters, there is a set of special parameters labeled, “Special Properties”. Beneath is a parameter called controlsContainer. As stated, this argument allows you to “declare which container the navigation elements should be appended too. Default container is the FlexSlider element.” Meaning, the javascript will read the page looking for our div class we pass through the argument. If it finds the div, the navigation will be generated within. If it cannot find our div, it will place the navigation within the default div, the one with the class of “flexslider“.

So, let us create a div and give it the class of “customSliderNav” and, separately, wrap our slider in the default class of flexslider. These are two separate divs and should not be nested within each one another. Next, we’ll pass our navigational change argument by inserting “.customSliderNav” after the controlsContainer parameter in the javascript. If you’re running multiple sliders, you can can call this in the custom class initialization script.

You should now have your slider and the slider’s navigation in two separate divs, enabling you to move it around the web page.

Love, 360.