Different Next and Previous Text for each Slide in

问题:

I have created a flexslider using a wordpress custom post.

I have 6 posts in total and 6 slides that are pulled out from the content of these posts.

I need to change Text for "Next" and "Previous" as the title of the next and previous post in the slide.

Here is the jQuery code I am using currently:

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

Thanks & Regards

回答1:

If you create the following js function:

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

You can use it in the start and after events of your bottom (going by the above comments) 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 - Please note I removed the start function from your top flexslider initiation

回答2:

Use prevText and nextText options:

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