Flexslider：如何在点击前显示幻灯片的缩略图？

Question

我正在尝试在http://residentialbylandsecurities.com/ 上复制效果 在他们的滑块上，如果您将鼠标悬停在箭头上，它会显示下一张幻灯片的缩略图。我安装了相同的滑块 (FlexSlider)，但这是自定义的。我的示例网站是here（未完成）。

他们的脚本在this file 中运行，但它是如此之长且庞大，并且做的比我需要的要多得多，我只想编写自己的函数。

我的伪代码： 1. Mainpulate next/prev 控件添加 div.thumbnail 到每个 2.找到当前活动幻灯片前后的幻灯片，并保存在变量中（prevSlide，nextSlide） 3. 从这些幻灯片 img 元素中获取 data-thumb 属性，并将每个属性保存在变量中（prevThumbData 和 nextThumbData） 4. 找到 .next div.thumbnail 和 .prev div.thumbnail 5. 将 prevThumbData 和 nextThumbData 作为 CSS 背景图像应用到它们各自的元素。 6. CSS：当鼠标悬停在箭头元素上时，在 div.thumbnail 中滑动

我根本不需要使用其他网站的功能，除非它更简单，我只需要完成以上。我已经将我的 IMG 元素设置为具有 data-thumb 属性，但还没有弄清楚如何修改滑块以包含 div.thumbnail。

编辑：我想我想出了程序中的第二步和第三步：

2。找到当前活动幻灯片之前和之后的幻灯片，并将它们保存在变量中（prevSlide，nextSlide）

function flexThumbs() { 
var slider = $('.flexSlider div ul')
var slides = new Array(slider.children());
var images = slide.find('img'); 
var currentSlide = $("li.flex-active-slide");
// find next and previous slides
var totalSlides = slider.slides.length;
    var nextSlide = slider.currentSlide + 1;
    if (nextSlide >= totalSlides)
        nextSlide = 0;
    var prevSlide = slider.currentSlide - 1;
    if (prevSlide < 0)
        prevSlide = totalSlides - 1;

3.从这些幻灯片 img 元素中获取 data-thumb 属性，并将每个属性保存在变量中（prevThumbData 和 nextThumbData）

var prevThumbData = $(prevSlide > "img").attr("data-thumb");
var nextThumbData = $(nextSlide > "img").attr("data-thumb");
}

Answer 1

看起来答案在他们的scripts.jsfile 中。

首先在他们调用.flexslider() 的部分中，他们传递了一个after: 回调。这只是 flexslider 中默认的回调选项之一。

回调后：

            after: function (slider) {
                if (!isTouch) {
                    mainSlider.setThumbs(slider);
                    flexsliderCopy.fadeIn(300); // Fade text back in
                } else {
                    //mainSlider.removeBulk(slider.currentSlide);
                }
            }

所以我们看到他们正在调用.setThumbs() 方法。快速 ctrl + f 显示：

            mainSlider.setThumbs = function (slider) {
                var totalSlides = slider.slides.length;
                var nextSlide = slider.currentSlide + 1;
                if (nextSlide >= totalSlides)
                    nextSlide = 0;
                var prevSlide = slider.currentSlide - 1;
                if (prevSlide < 0)
                    prevSlide = totalSlides - 1;

                prevThumb.find('div').css({
                    backgroundImage: 'url(' + slider.slides.eq(prevSlide).attr('data-thumb') + ')'
                });
                nextThumb.find('div').css({
                    backgroundImage: 'url(' + slider.slides.eq(nextSlide).attr('data-thumb') + ')'
                });

                prevThumb.animate({
                    opacity: 1
                });
                nextThumb.animate({
                    opacity: 1
                });
            };