为每个滑块 DIV 生成 Swipe JS 滑块答案

【问题标题】：Generate Swipe JS slider for each slider DIV为每个滑块 DIV 生成 Swipe JS 滑块
【发布时间】：2013-04-16 20:33:22
【问题描述】：

我首先要说我不是程序员，我是设计师。我对 jQuery 的了解有限，尽管经过足够的修补，我经常可以得到我需要工作的东西。所以请耐心等待。

我正在制作一个网站（可能由 Wordpress 提供支持），该网站将在单个页面上包含多个滑块。我已经设法让 Swipe JS 在一个滑块上正常工作，但我需要一些代码来搜索我所有的滑块 DIV 并为它们创建一个新的 Swipe 对象。

我用于一个滑块的代码是“var slider = new Swipe(document.getElementById('slider'));”但这不适用于多个滑块。

HTML 的结构如下所示：

<div class="slider">
    <ul>
        <li style="display:block;"><img src="01.jpg"></li>
        <li style="display:none;"><img src="02.jpg"></li>
        <li style="display:none;"><img src="03.jpg"></li>
    </ul>

    <a class="prev" href="#" onclick='slider.prev();return false;'>prev</a> 
    <a class="next" href="#" onclick='slider.next();return false;'>next</a>
</div>

如果你们能提供任何帮助，我将不胜感激。谢谢！

【问题讨论】：

标签： jquery slider swipe

【解决方案1】：

如果你想要所有像这样的滑动

var swipes = []
$('.slider').each(function(i, obj) {
        swipes[i] = new Swipe(obj);
    });

您只需为所有滑动分配class="slider" 属性。

<div class="slider" id="slider_1">...</div>
<div class="slider" id="slider_xy">...</div>
<div class="slider" id="foobar">...</div>

无论ID如何，它都应该起作用，因为我们选择具有特定类的元素。

您可以使用

访问每次滑动

swipes[1].prev();
swipes[9].prev();

数字要求您有多少次滑动，但请记住：滑动不。 1 将是swipes[0]

【讨论】：

有没有办法为这些滑块自动生成下一个和上一个链接？由于滑块是由 CMS 生成的，我需要找到一种方法来自动生成下一个和上一个。

【解决方案2】：

@tylorreimer

我将 swipe.js 用于 ajax 添加的动态内容。我所做的只是为每个添加的滑块添加一个计数器。所以对于每个 next 和 prevbuttons 我做了一个onclick="swipes[swipeSliderCounter].next()

顺便说一句，我以 mercen 的方式初始化滑块。

$('.slider').each(function(i, obj) {
        swipes[i] = new Swipe(obj);
    });

【讨论】：