CODEWITHSUNDEEP
javascriptjquery
user1564354
user1564354

Reputation: 110

jQuery touch swipe effect on li items

i'm tring to use jQuery touch swipe to click each li item. this is my html

<div class="slider-active" id="active_885">
<label for="slide1-885"></label>
<label for="slide2-885"></label>
<label for="slide3-885"></label>        
</div>

this is my script

jQuery("#slides_885").swipe({
  swipeRight:function(event, direction, distance, duration, fingerCount) {
  jQuery("#active_885 label:first").click();
  },
  swipeLeft:function(event, direction, distance, duration, fingerCount) {
  jQuery("#active_885 label:last").click();
  }
});

with my little knowledge in javascript, i could make the above script to click the first label when swipe right and click the last label when swipe left. But what i want is to make the script click the labels (shown in my html above) in order one by one downwards with each swipe to the right and upwards with swipe left.

hope i could explain the point. any help??

Upvotes: 0

Views: 1317

Answers (1)

HowDoIDoComputer
HowDoIDoComputer

Reputation: 1413

You can create an array of your <label> items and iterate through that based on swipes.

Something like this:

HTML:

<div class="slider-active" id="active_885">
    <label class="swipeLabel" for="slide1-885"></label>
    <label class="swipeLabel" for="slide2-885"></label>
    <label class="swipeLabel" for="slide3-885"></label>        
</div>

JavaScript:

var active885Labels = jQuery('label.swipeLabel'),
    current885Label = -1;

jQuery("#slides_885").swipe({
    swipeRight: function(event, direction, distance, duration, fingerCount) {
                    if (current885Label < active885Labels.length) {
                        current885Label++;
                        active885Labels[current885Label].click()
                    }
                    else
                    {
                        //we are already at the last label, either wrap around or do nothing, or click the last label again, or do something else
                    }
                },
    swipeLeft: function(event, direction, distance, duration, fingerCount) {
                    if (current885Label > 0) {
                        current885Label--;
                        active885Labels[current885Label].click()
                    }
                    else
                    {
                        //we are already at the first label, either wrap around or do nothing, or click the first label again, or do something else
                    }
                }
});

Upvotes: 2

Related Questions