Flexslider controlsContainer – jquery object

Recently i wanted to make a flexslider and have the controls in another div. This can be done with the controlsContainer built in option of flexslider.

Basicly it’s just a left side column with the slider code ‘(‘.flexslider-small’), right side column with text and the controls at the bottom (controls box = ‘.flexslider-controls-box’)

Normally setting: controlsContainer: “.flexslider-controls-box” does this for you. However when there are more than one of these sliders it keeps adding more controls in the same flexslider-controls-box which bugs it and the control doesn’t work anymore.

I tried then to incorporate wordpress the_id into the code so that it would target unique control boxes but it doesn’t seem to be working?

<div class="flexslider-small" id="<?php the_id(); ?>">

<div class="flexslider-controls-box-<?php the_id(); ?>"></div>

WordPress wise the previous two divs get the same id 🙂 I then tried to link the id to the controlscontainer as you can see below.

Can anyone point me in the right direction? The code itself doesn’t throw any errors it just doesn’t work?

Flexslider init code

$('.flexslider-small').flexslider({
    animation: 'fade',
    touch: true,
    slideshow: true,
    controlNav: true,
    directionNav: false,
    smoothHeight: true,
    controlsContainer: $('.flexslider-controls-box-' + id_link )
});

var id_link = $(".flexslider-small").attr('id');