基于php数组的jquery内容滑块答案

【问题标题】：Jquery content slider based on php array基于php数组的jquery内容滑块
【发布时间】：2014-07-18 19:13:07
【问题描述】：

我在构建基于对象数组的滑块容器时遇到问题。通过 curl - php 调用 json 内容后，我得到如下页面：

<div id ="slider" class="grid">
  <!-- one -->
  <div class="top"></div>
  <div class="left"></div>
  <div class="right"></div>
  <div class="bottom"></div>
  <!-- two -->
  <div class="top"></div>
  <div class="left"></div>
  <div class="right"></div>
  <div class="bottom"></div>
  <!-- three -->
  <div class="top"></div>
  <div class="left"></div>
  <div class="right"></div>
  <div class="bottom"></div>
  <!-- many... -->
  <div class="top"></div>
  <div class="left"></div>
  <div class="right"></div>
  <div class="bottom"></div>
</div>

我需要通过幻灯片循环浏览这些元素，其中每张幻灯片同时显示四个 div（上、左、右、下）。有人可以让我以正确的方式吗？非常感谢。

更新：环顾四周后，我发现了似乎解决方案/解决方法：它与这篇文章Wrapping sets of elements from a list in DIVs using jQuery 相关，并带有一个jsfiddle http://jsfiddle.net/QWHYK/。我用 span 标签包装了我的所有 div，并使用那一行代码来包装元素（我无法在 jquery 代码中使用 'div' 而不是 'span'，所以我做了：

<div id="slider" class="grid>
  <!-- one -->
  <span><div class="top"></div></span>
  <span><div class="left"></div></span>
  <span><div class="right"></div></span>
  <span><div class="bottom"></div></span>
 <!-- continue .... -->

while ($('#slider > span').length) {
$('#slider > span:lt(4)').wrapAll('<div class="row slide" />');
}

我得到了这个：

<div id="slider" class="grid>
  <!-- one -->
  <div class="row slide">
        <span><div class="top"></div></span>
        <span><div class="left"></div></span>
        <span><div class="right"></div></span>
        <span><div class="bottom"></div></span>
  </div>
  <!-- continue... -->
</div>

这是我能在短时间内做到的最好的。

【问题讨论】：

请jsfiddle
在 UPDATE 文本中有一个指向原始 jsfiddle 的链接，我从那里获取代码：jsfiddle.net/QWHYK
@Prashant 我做了一个jsfiddle ;)。用 firebug 检查结果。

标签： jquery arrays object slider containers

【解决方案1】：

您可能需要做的第一件事是找到一种方法，将四个 div 的集合中的每一个都包装到一个包装器 div 中。给每个包装器 div 一个名为 .slide 的类或其他东西。

你能做到这一点吗？之后，实现滑块应该不会太难。有很多插件可以做到这一点。您是否考虑过类似 Slick Carousel：http://kenwheeler.github.io/slick/ - 看起来 Demo 2 可能正是您所需要的。

希望对您有所帮助，马克

【讨论】：

感谢您的鼓励；）。现在我可以试试 Slick。