带箭头的滑块答案

【问题标题】：Slider with arrows带箭头的滑块
【发布时间】：2012-09-01 23:00:10
【问题描述】：

我正在创建一个滑块，它与 zurb 的轨道滑块一起运行。这里的重点是我想用一组导航箭头控制两个幻灯片......这是我添加到 orbit.next 函数的内容：

$('.description > p:visible')
  .fadeOut(500)
  .next()
  .fadeIn(500)
  .end()
  .appendTo('.description');

这是下一个箭头的代码，但我如何调整此代码使其也适用于上一个箭头？

谢谢
本

【问题讨论】：

标签： jquery slider zurb-foundation orbit

【解决方案1】：

我真的不知道轨道滑块，但我想我能以某种方式提供帮助，这就是我到目前为止所做的

$('.description p:last-fo-type')
  .fadeOut(500)
  .prev()
  .fadeIn(500)
  .end()
  .prependTo('.description');

如果我误解了什么，请告诉我。所以我可以做必要的更正。

祝你好运。

【讨论】：

【解决方案2】：

我已经明白了……

  this.$element.bind('orbit.next', function () {
    self.shift('next');

    if ($('.description > p:visible').is(':not(:last-of-type)')) {
      $('.description > p:visible').fadeOut(500).next().fadeIn(500);
    } else {
      $('.description > p:visible').fadeOut(500);
      $('.description > p:first').fadeIn(500);
    }
  });

  this.$element.bind('orbit.prev', function () {
    self.shift('prev');
    if ($('.description > p:visible').is(':not(:first-of-type)')) {
      $('.description > p:visible').fadeOut(500).prev().fadeIn(500);
    } else {
      $('.description > p:visible').fadeOut(500);
      $('.description > p:last').fadeIn(500);
    }
  });

【讨论】：