为每个滑块 DIV 生成 Swipe JS 滑块 [英] Generate Swipe JS slider for each slider DIV

问题描述

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

I'll start off by saying I'm not a programmer, I'm a designer. I have a limited knowledge of jQuery, though with enough tinkering I can often get what I need to work. So bear with me here.

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

I'm making a site (likely powered by Wordpress) that will have multiple sliders on a single page. I've managed to get Swipe JS to work just fine with one slider but I need some bit of a code that searches for all my slider DIVs and creates a new Swipe object for them.

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

The bit of code I used for one slider was "var slider = new Swipe(document.getElementById('slider'));" but that won't work for multiple sliders.

HTML 的结构如下所示:

Structure of the HTML looks like this:

<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>

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

I'd appreciate any help you guys can give. Thanks!

推荐答案

如果你想要这样的滑动操作

if you want all swipestry something like this

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

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

you just need to assign all swipes the class="slider" attribute.

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

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

no matter how the ID is it should work because we select the elements with a specific class.

您可以使用

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

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

the number demands on how many swipes you have, but remember: Swipe no. 1 would be swipes[0]

这篇关于为每个滑块 DIV 生成 Swipe JS 滑块的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！