Flexslider中每张幻灯片的不同的下一个和上一个文本 [英] Different Next and Previous Text for each Slide in Flexslider

问题描述

我使用wordpress自定义帖子创建了flexslider.

I have created a flexslider using a wordpress custom post.

我总共有6个帖子，并且从这些帖子的内容中抽出了6张幻灯片.

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.

这是我当前正在使用的jQuery代码:

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

感谢&问候

推荐答案

如果创建以下js函数:

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

您可以在底部的开始和结束事件中使用它(通过上述注释)flexslider启动:

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

示例-请注意，我从最开始的flexslider启动中删除了启动功能

Example - Please note I removed the start function from your top flexslider initiation

这篇关于Flexslider中每张幻灯片的不同的下一个和上一个文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！