$(selector).flexslider ({ before: function() }) 问题 - 跳过第一张幻灯片

Question

尝试在 flexslider 上重新定位字幕，我认为我可以这样做： var myP = $('p.flex-caption').detach().appendTo(x); 其中 x 是我希望字幕出现在其后的任何元素。在实践中它有效 ok - 我得到了所有字幕的转储，而不仅仅是与活动幻灯片相关的字幕，但这可能只是一个 css 的东西 - 更大问题是直到第二张幻灯片才会发生这种情况。我在 flexslider.js 内部调用它，（粘贴在下面）在 $(selector).flexslider 内部和 'before' 内部 - 我猜这个问题与加载方式有关。在另一种方法中，我尝试创建一个元素 - captionDiv - 在其中另一个创建的元素 - caption - 将填充 html 从查询 slider.slides[slider.animatingTo] 返回，但同样，第一个标题不会出现。

$(selector).flexslider( {
        smoothHeight: options.h_responsive,
             animation: options.animation,
             direction: options.direction,
             slideshow: options.slideshow,
             slideshowSpeed: Number( options.cycle_speed ) * 1000,
             animationSpeed: Number( options.animation_speed ) * 1000,
             pauseOnHover: options.pause_on_hover,
             controlNav: options.control_nav,
             directionNav: options.direction_nav,
             keyboard: options.keyboard_nav,
             touch: options.touch_nav,
             before: function( slider ) {
               slider.removeClass('loading');
               //added for outside caption
               //var sgmCaption = $('p.flex-caption');
               var tnh = $('div.flex-thumbnail-holder');
               //sgmCaption.detach().appendTo(tnh);
               if (!slider.captionDiv) {
                   slider.captionDiv = document.createElement("div");
                   slider.captionDiv.setAttribute("class", $(slider)[0].getAttribute("id") + "-caption flex-outside-caption");
                   //$(slider.captionDiv).insertAfter($(slider));
                   $(slider.captionDiv).insertAfter($(tnh));
               }

               var caption = slider.slides[slider.animatingTo].querySelector('.flex-caption');
               slider.captionDiv.innerHTML = caption ? caption.innerHTML : "";

             }

           });

感谢您的帮助。

Answer 1

根据文档：

$(selector).flexslider({
    // Callback: function(slider) - Fires when the slider loads the first slide
    start: function(){},
    // Callback: function(slider) - Fires asynchronously with each slider animation
    before: function(){}
});

before 回调仅在幻灯片之间的动画开始时触发。您需要自己准备第一张幻灯片的标题 - 在连接之后或在 start 回调中。

$(selector).flexslider ({ before: function() }) 问题 - 跳过第一张幻灯片

$(selector).flexslider ({ before: function() }) issue - skips first slide

javascript

jquery

flexslider