Introducing FlexSlider2 manual direction controls extension

Update – Nov 2012 – Thankfully due to a recent update this plugin is no longer needed. 

FlexSlider2 is a jQuery plugin that allows you to easily insert rotating banners, image galleries and app examples. They also automatically become responsive.

The problem with FlexSlider2

Out of the box however it doesn’t allow you to use custom HTML elements for the direction controls.

The default appears as you mouse over the gallery, looking like this:

I had a need to use permanent navigation, always appearing, and with custom HTML which differed from the default.

Although FlexSlider2 allows you to set custom tabs (those dots at the bottom), there is no easy way of setting custom directional navigation.

So to fix the issue I wrote an extension to FlexSlider2

My extension – Flexslider2+ManualDirectionalControls

Download the extension here, you can start using it straight away, following the instructions on github.

In a nutshell, to add the functionality, all you need to do is include the javascript and do the following:

$(‘.flexslider’).flexslider({
 directionNav: false
 }).flexsliderManualDirectionControls();

There are options you can pass, but this keeps it easy by looking for HTML elements named ‘next’ or ‘previous’ inside the ‘.flexslider’ element and takes care of everything.

Why didn’t I just send an updated version of FlexSlider to github?

There was a discussion at Hatch of simply adapting FlexSlider2 to add the functionality and submit a pull request. I gave it some thought, but since the project currently has 55 issues, 4 pull requests and a great deal of discussion around features, I decided to take the law into my own hands.

9 Comments

qofe

Wondering why you wouldn’t just adjust the CSS?

Josh

There documentation appears to be more up to date on their github page; https://github.com/woothemes/FlexSlider

Reasons you wouldnt jsut update their css is in the event you have more than one instance of the flexslider on your site. And generally, you should have to do that. Their should be an api call you can make to manually trigger actions such as “next” and “previous” or goto(3), etc… Luckily they have such options.

RogueSkolar

“Wondering why you wouldn’t just adjust the CSS?”

Have you tried, it’s not that easy.

The flexslider by default appends the following markup for the direction nav:

<ul class="flex-direction-nav"

It makes it tiresome to configure say a 100% height AP direction button on either side, which would be much easier if just the link tags were appended for example. You’ve got to mess around otherwise with a myriad of other stuff.

RogueSkolar

bugger code got ate up… oh well.

Shaun Morrison

Hi, in Flexslider 2 you can use the option ‘directionNav: false’ and then specify your own click events on any HTML element required e.g.

var $slideshow = $(‘#slideshow’);
$slideshow
.flexslider({
animation: ‘slide’,
directionNav: false
});

$(‘.slideshow-next’).click(function(){
$slideshow.flexslider(“next”);
});

$(‘.slideshow-prev’).click(function(){
$slideshow.flexslider(“prev”);
});

Troels

It doesn’t work for me.
Nothing happens

Head section-

$(window).load(function() {
$(‘.flexslider’).flexslider();
});

$(‘.flexslider’).flexslider({
directionNav: false
}).flexsliderManualDirectionControls();

Body section-


One

Two

Three

lory

Hum too bad the script doesn’t allow really to a real custom flex-nav-direction config. For a website I had to have directions controls outside the flexslider container (not possible with the script). When you have directions inside, you don’t need really a script and you can custom it in CSS.

But well, I’ve override some lines of the scripts and it’s work well after (a bit tricky though). :)

qofe79

I had same issue (different site from what I was working on back when I first posted.) :-) Anyway, I took care of it by adding left & right padding to the outermost carousel div. Also, since my arrows always had to be visible, I adjusted styles that control visibility on the nav.

lory

I was speaking about being outside the HTML structure of course… And not just “outside in the view”

Leave a comment: