Question

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

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

我需要将“下一页”和“上一页”的文字更改为幻灯片中下一篇和上一篇文章的标题。

这是我目前使用的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)
                    }
                });
            }
        });

谢谢＆amp;此致

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

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中每张幻灯片的不同下一个和上一个文本

2 个答案: