Flexslider中每张幻灯片的不同下一个和上一个文本

我使用wordpress自定义post创建了一个flexslider。

我总共有6个post，6个幻灯片从这些post的内容中提取出来。

我需要将“下一个”和“上一个”的文本更改为幻灯片中下一个和上一个post的标题。

这是我目前使用的jQuery代码：

$('#ethosBotSection').flexslider({ animation: "slide", slideToStart: 0, useCSS: false, controlNav: true, directionNav: false, slideshow: false, manualControls: '.ethosNav li', start: function(slider) { $('.ethosNav li').click(function() { $('.flexslider').show(); var slideTo = $(this).attr("rel") var slideToInt = parseInt(slideTo) if (slider.currentSlide != slideToInt) { slider.flexAnimate(slideToInt) } }); } }); 

感谢和问候

Answer 1

如果您创建以下js函数：

 function setText(slider) { var prev = slider.currentSlide - 1, // in case slider does not strat at 0 next = slider.currentSlide + 1; if (prev < 0) { prev = slider.slides.length - 1; } if (next == slider.slides.length) { next = 0; } $('#ethosPrev a').text($(slider.slides[prev]).text()); $('#ethosNext a').text($(slider.slides[next]).text()); } 

您可以在底部的开始和事件后使用它（通过上面的注释）flexslider启动：

 $('#ethosBotSection').flexslider({ animation: "slide", slideToStart: 0, useCSS: false, controlNav: true, directionNav: false, slideshow: false, manualControls: '.ethosNav li', start: function (slider) { setText(slider); }, after: function (slider) { setText(slider); } }); 

示例 - 请注意我从顶部flexslider启动中删除了启动function

Answer 2

使用prevText和nextText选项：

 $('#ethosBotSection').flexslider({ animation: "slide", slideToStart: 0, useCSS: false, controlNav: true, prevText: "Prev Slide", //String: Set the text for the "previous" directionNav item nextText: "Next Slide", // String: Set the text for the "next" directionNav item directionNav: false, slideshow: false, manualControls: '.ethosNav li', start: function(slider) { $('.ethosNav li').click(function() { $('.flexslider').show(); var slideTo = $(this).attr("rel") var slideToInt = parseInt(slideTo) if (slider.currentSlide != slideToInt) { slider.flexAnimate(slideToInt) } }); } });