如何将Flexslider移动到最后一个幻灯片

Question

我有一个完美运行的flexslider对象。 然而，我有一个在页面上的锚点需要将轮播图移动到最后一张幻灯片。 此外，幻灯片编号可能会变化，因此针对特定值的索引不足以满足要求。 我没有问题地移动到特定的索引位置，如下所示（移动到第一个索引位置）：

$('.flexslider').data("flexslider").flexAnimate(0);

我想可能有一些关键词，或者是一个方程式，但我还没有找到可靠的资源。你有什么想法吗？

- Travis Hall

Answer 1

我认为你离答案很近了。您可以通过.index()函数获取集合/选择器中任何相关元素的索引。

现在，假设您有一个类为.slides的

包含多个li。

要获取最后一个li的索引：

var index = $('.slides li').index($('.slides li:last'));

现在，既然您已经获得了所需幻灯片的索引，您可以将此索引传递给flexslider以激活或显示该幻灯片：

$('.flexslider').data("flexslider").flexAnimate(index);



你可以看到，默认情况下滑块从最后一个幻灯片开始。希望这可以帮助你。

此外，您可以将其用于“单击处理程序”。

更新：幻灯片存在问题，除非单击滑块的下一个或上一个链接，否则无法手动滑动。我找到的可能修复方法是：


var lastSlide = $('.slides li').index($('.slides li:last'));
$("a.specs").click(function () {    
    flex.flexslider('next'); // This is the trick. 
    flex.flexslider(lastSlide)
});

示例: http://jsfiddle.net/lotusgodkk/n9JUc/21/

- K K

---

请在这里分享那段代码。我不认为这是作用域问题。 - K K

var lastSlide = $('.slides li').index($('.slides li:last'));$("a.specs").click(function(){ console.log(lastSlide); $('.flexslider').data("flexslider").flexAnimate(lastSlide); }); - Travis Hall

好的，如果您能为您的代码创建一个fiddle，那么我可以更好地帮助您。正如您所看到的，这个fiddle运行良好。您的代码中一定有什么问题。 - K K

在创建fiddle的过程中，我已经分离出了问题... http://jsfiddle.net/travhall/n9JUc/12/ ... 显然使用Modernizr调用来操作flexslider设置会创建某种冲突。对于我的能力感到更有信心，但对如何解决问题感到更加迷茫。有什么想法吗？ - Travis Hall

KK，非常感谢，太棒了！！！（一旦我的声望提高了，我就会点赞这个回答）...你是一个真正的JavaScript忍者！ - Travis Hall

Answer 2

如果您绕过.flexslider助手函数，则可以覆盖内部检查器。

$('.flexslider').data("flexslider").flexAnimate(index, true, true);

第三个参数是覆盖参数。它基本上强制flexslider动画到那个幻灯片，即使它没有通过canAdvance检查的内部检查。

如果您想淡入淡出动画而不是滑动，则需要这样做。K K的解决方法在淡入淡出动画中无效。

- Frank Robert Anderson