在 FlexSlider 中获取当前幻灯片的文本

Question

我在我的网站上使用 FlexSlider。我想获取当前幻灯片的文本。我尝试在 after 函数中执行此操作：

$(window).load(function() {
    $('.flexslider').flexslider({
        startAt: 1,
        controlNav: false,
        animationLoop: false,
        slideshow: false,
        animation: "slide",
        directionNav: true,
        after: function(){
            var curSlide = $('#slider').data('flexslider').currentSlide;
            alert("current slide="+curSlide.text());
        }   
    });
});

我尝试使用 text() 函数，但它不起作用。我该怎么做？

Answer 1

currentSlide returns 当前幻灯片的编号，不是元素。您可以使用 nth-of-type 来查找元素。

$(window).load(function() {
    $('.flexslider').flexslider({
        startAt: 1,
        controlNav: false,
        animationLoop: false,
        slideshow: false,
        animation: "slide",
        directionNav: true,
        after: function(slider){
            var curSlide = slider.find("li:nth-of-type("+(slider.currentSlide+1)+")")[0];
            var text = $(curSlide).text().trim();
            alert(text);
        }   
    });
});

这是一个有效的 JSFiddle

解释：

根据 flexslider documentation，每个方法都有一个对滑块对象的引用。
测试了一下发现slider.currentSlide returns当前幻灯片的编号，从0开始
我们使用滑块对象和find来获取当前的幻灯片元素。我们需要给slider.currentSlide加1，因为它是从0开始的，而nth-of-type选择器是从1开始的。
我意识到 find 方法返回了 3 个 li 元素，但只有第一个是需要的，这就是我选择 [0] 元素的原因。
最后我使用 trim() 删除多余的空格。

更新

我意识到有更好的方法来做到这一点。 FlexSlider 将 class flex-active-slide 分配给活动幻灯片，因此更容易获取幻灯片元素。

$(window).load(function() {
    $('.flexslider').flexslider({
        startAt: 1,
        controlNav: false,
        animationLoop: false,
        slideshow: false,
        animation: "slide",
        directionNav: true,
        after: function(slider){
            var curSlide = slider.find("li.flex-active-slide");
            var text = $(curSlide).text().trim();
            alert(text);
        }   
    });
});

在 FlexSlider 中获取当前幻灯片的文本

Getting the text of the current slide in FlexSlider

html

jquery

flexslider