javascript – 具有缩略图的基础Flexslider无法正常工作

2023年9月25日 215次阅读

我正在尝试在使用Foundation构建的站点中构建一个使用Flexslider的库页面.如果我自己构建Flexslider,它可以正常工作,但是当我将它合并到带有Foundation的页面时,它会停止工作.我只能通过添加一些额外的CSS来加载任何图像以强制加载初始图像,但缩略图不控制显示哪个幻灯片(它们甚至不显示为可点击元素)并且没有导航控件出现.与基础和Flexslider相关的所有内容都已从一个工作示例中复制,以避免输入错误. 最佳答案 作为一种解决方法,我做了以下……

我用以下代码创建了大拇指：

<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;
    });
});
点赞