JQmobile detect swipe with bxSlider

JavaScript
1

hey guys im using a plugin called bxslider and i’m trying to detect when a user swipes the divs.
here are the versions i’m using…i have to use jquery 2.2.4 as the errors it creates with jquery mobile.
jquery 2.2.4
jquery mobile 1.4.5

Basically we need to detect whats in view for mobile users and add a selected class to this. For mobile users, there’s 1 option in view, when the slide next or prev is slid or clicked and a new option comes into view, this option should get automatically assigned a selected class. The problem is now that the below code doesnt consistently alert, and doesn’t accommodate a click event. Can anyone give some pointers? Thanks

1.<div class="internet_data">
                  <div class="slide slide-selected" data-value="1 GB">1 GB</div>
                  <div class="slide" data-value="2 GB">2 GB</div>
                  <div class="slide" data-value="3 GB">3 GB</div>
                  <div class="slide" data-value="4 GB">4 GB</div>
                  <div class="slide" data-value="5 GB">5 GB</div>
                  <div class="slide" data-value="6 GB">6 GB</div>
                  <div class="slide" data-value="7 GB">7 GB</div>
                  <div class="slide" data-value="8 GB">8 GB</div>
                  <div class="slide" data-value="9 GB">9 GB</div>
                  <div class="slide" data-value="Unlimited">Unlimited Data</div>
                </div>

1.$.event.special.swipe.horizontalDistanceThreshold = 5;
$.event.special.swipe.scrollSupressionThreshold  = 5;
$.event.special.swipe.durationThreshold = 5;

$( document ).on( "pageinit", function() {
    $('.slide').on("swipe",function() {
            alert('swipe');
    });
});
2

Ok made a fiddle with what we’re trying to do with swipe aside. This should add some clarity. On right arrow click we need to remove the slide-selected class and add it to the new slide in view.

Help greatly appreciated

3

ok fixed by adding the below in bxslider func

onSlideAfter: function($slideElement, oldIndex, newIndex) {
    $slideElement.addClass('slide-selected');
  },
  onSlideBefore: function($slideElement, oldIndex, newIndex) {
    $(".slide-selected").removeClass('slide-selected');
  }
1 Like
4

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.