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

Question

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

我总共有 6 posts，从这些 posts 的内容中提取了 6 张幻灯片。

我需要将 "Next" 和 "Previous" 的文本更改为幻灯片中下一张和上一张 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());
}

你可以在你的 bottom 的开始和之后的事件中使用它（按照上面的评论） flexslider initiation:

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

Example - 请注意，我从您的顶级 flexslider 启动中删除了开始功能

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

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

Different Next and Previous Text for each Slide in Flexslider

wordpress

jquery

flexslider