带有缩略图的 Foundation + Flexslider 不起作用答案

【问题标题】：Foundation + Flexslider with Thumbnails not working带有缩略图的 Foundation + Flexslider 不起作用
【发布时间】：2018-02-25 23:22:09
【问题描述】：

我正在尝试在使用 Foundation 构建的站点中使用 Flexslider 构建画廊页面。如果我自己构建 Flexslider，它可以正常工作，但是当我将它合并到 Foundation 的页面中时，它会停止工作。我只能通过添加一些额外的 CSS 来强制加载初始图像来加载任何图像，但缩略图不控制显示哪张幻灯片（它们甚至不显示为可点击元素）并且没有导航控件出现。与 Foundation 和 Flexslider 相关的所有内容均从一个工作示例中复制，以避免输入错误。

【问题讨论】：

我也有同样的问题！开箱即用的 Flexslider 拇指工作正常……将其放入 Foundation 环境中，它们不会出现。所有不涉及拇指的滑块都可以正常工作。
Foundation 的 Git Repo 中有一个问题：github.com/zurb/foundation/issues/869 也许你可以让 Zurb 的人重新打开它，或者至少在那里回答你的问题。 =) 另外，据我在那里读到的，这与脚本的定位有关。

标签： javascript jquery css zurb-foundation flexslider

【解决方案1】：

作为一种变通方法，我做了以下...

我用下面的代码创建了拇指：

<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>

然后使用一些 jquery，当您单击每个拇指时，它会将滑块更改为相应的幻灯片：

$(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;
    });
});

【讨论】：