Question

I’m trying to extend a jQuery UI Widget.

The widget can be found here: https://github.com/richardscarrott/jquery-ui-carousel.

I’m using version 0.8.5. The Touch extension isn’t working yet, so I need to create something super basic for myself by extending the Widget. I’m planning to use the jQuery Touchwipe Plugin that can be found here: http://www.netcu.de/jquery-touchwipe-iphone-ipad-library

Here’s the code I’ve been trying, but I don’t have much experience with UI Widgets, so am a bit lost. Any help is greatly appreciated.

$.widget("rs.jdcarousel", $.extend({}, $.rs.carousel.prototype, {

_touch: function(){

    elems.mask.touchwipe({
        wipeLeft   : function() { if( theCarousel.isHorizontal  ){ theCarousel.next(); } },//alert("left"); },
        wipeRight  : function() { if( theCarousel.isHorizontal  ){ theCarousel.prev(); } },//alert("right"); },
        wipeUp     : function() { if( !theCarousel.isHorizontal ){ theCarousel.prev(); } },//alert("up"); },
        wipeDown   : function() { if( !theCarousel.isHorizontal ){ theCarousel.next(); } }, //alert("down"); },
        min_move_x : 20, //check this
        min_move_y : 20,
        preventDefaultEvents: true
    });
}

// Override other methods here.

}));

$.rs.jdcarousel.defaults = $.extend({}, $.rs.carousel.defaults);

This, obviously, isn’t working.

Can anyone salvage this for me?

Thanks!

-Jacob

Answer 1

Here’s what I did:

I loaded the jquery TouchSwipe plugin: http://plugins.jquery.com/project/touchSwipe

I then added the following js to the page:

var swipeOptions = {
  swipe     : swipe,
  threshold : 75
}

  $("#investments").swipe( swipeOptions );


function swipe( event, direction ) {

  if (direction == "left") {
      $("#investments").carousel('next');
  }
  else if (direction == "right") {
      $("#investments").carousel('prev');
  }
}

Everything is working great!