Generate Swipe JS slider for each slider DIV

问题

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.

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.

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.

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!

回答1:

if you want all swipestry something like this

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

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>

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

you can access each swipe by using

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

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

回答2:

@tylorreimer

I used swipe.js for dynamic content added by ajax. All I did was adding a counter for each slider that was added. So for each next and prevbuttons i made an onclick="swipes[swipeSliderCounter].next()

Btw I initialize the slider the way mercen did.

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

来源：https://stackoverflow.com/questions/14305631/generate-swipe-js-slider-for-each-slider-div

标签

jquery

slider

swipe