Foundation + Flexslider with thumbnails not working

Question

I am trying to create a gallery page using Flexslider on a site built with Foundation. If I create Flexslider myself, it works fine, but when I include it in a page with Foundation, it stops working. I can only get any downloadable image by adding some additional CSS to make the initial image load, but the thumbnails do not control which slide is displayed (and they don’t even display as an element that can be clicked), and none of the navigation displays the controls . Everything related to Foundation and Flexslider was copied from a working example to avoid typing errors.

Answer 1

As a job, I did the following ...

I created a preview with the code below:

<div class="flexslider-controls">
    <ol class="new-nav">

        <li>                        
            <div class="medium-3 columns">                          
                <div class="row">
                    <div class="columns">
                        <a href="#"><img src="images/slider-thumb-1.jpg" /></a>
                    </div>
                </div>                              
            </div>
        </li>

        <li>
            <div class="medium-3 columns">                          
                <div class="row">
                    <div class="columns">
                        <a href="#"><img src="images/slider-thumb-1.jpg" /></a>
                    </div>
                </div>                              
            </div>
        </li>

        <li>
            <div class="medium-3 columns">                          
                <div class="row">
                    <div class="columns">
                        <a href="#"><img src="images/slider-thumb-2.jpg" /></a>
                    </div>
                </div>                              
            </div>
        </li>

        <li>
            <div class="medium-3 columns">                          
                <div class="row">
                    <div class="columns">
                        <a href="#"><img src="images/slider-thumb-3.jpg" /></a>
                    </div>
                </div>                              
            </div>
        </li>

    </ol>
</div>

Then, using some jquery, when you click on each finger, it will change the slider to the corresponding slide:

$(document).ready(function () {
    $(document).on('click','.new-nav li a',function(){          
        var index = $('.new-nav li a').index(this) + 1;
        $('.videos-slider').flexslider(index);
        return false;
    });
});