Расширение jquery-ui-carousel с помощью плагина jQuery Touchwipe

#jquery #jquery-ui

#jquery #jquery-ui

Вопрос:

Я пытаюсь расширить виджет jQuery UI.

Виджет можно найти здесь:https://github.com/richardscarrott/jquery-ui-carousel.

Я использую версию 0.8.5. Расширение Touch еще не работает, поэтому мне нужно создать что-то супер базовое для себя, расширив виджет. Я планирую использовать плагин jQuery Touchwipe, который можно найти здесь:http://www.netcu.de/jquery-touchwipe-iphone-ipad-library

Вот код, который я пробовал, но у меня нет большого опыта работы с виджетами пользовательского интерфейса, поэтому я немного заблудился. Любая помощь приветствуется.

 $.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);
  

Это, очевидно, не работает.

Может ли кто-нибудь спасти это для меня?

Спасибо!

-Джейкоб

Ответ №1:

Вот что я сделал:

Я загрузил плагин jquery touchSwipe:http://plugins .jquery.com/project/touchSwipe

Затем я добавил на страницу следующий js:

 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');
  }
}
  

Все работает отлично!