Conflict with 2 touch event javascript plugins, layering touch events in wrong order?

Question

See my jsFiddle for testing.

I am using these two js/jquery plugins, Ken Wheelers Slick Slider and Jakie Stfu Snap.js plugins, which both rely on touch events to fire their functions.

I want to be able to use the plugins in conjunction with each other. I've created a jsFiddle of my exact working environment.

You can see the snap.js draw slide works great. And the Slick Slider touch events also work great too, but only when slick sliders touch-scrolling left. If I try and touch-scroll right, it opens the snap.js menu draw.

My question is can anyone help me make the Slick Slider have dominance over the snap.js plugin? Only in the carousel area so that snap.js can work as normal on all other areas.

Here is my code which is all standard demo code from both plugins.

/**
 ** pure js
 **/

// snap event
var addEvent = function addEvent(element, eventName, func) {
  if (element.addEventListener) {
    return element.addEventListener(eventName, func, false);
  } else if (element.attachEvent) {
    return element.attachEvent("on" + eventName, func);
  }
};

// snap parmas
var snapper = new Snap({
  element: document.getElementById('content'),
  disable: 'right',
  maxPosition: 250,
  minPosition: -250,
  transitionSpeed: .2
});

// snap button click function
addEvent(document.getElementById('ol'), 'click', function() {
  snapper.open('left');
});

/**
 ** jQuery functions
 **/
(function($) {

  // slick slider
  $('#carousel').slick({
    dots: false,
    prevArrow: false,
    nextArrow: false,
    autoplay: true,
    autoplaySpeed: 3000
  });

})(jQuery);

Any help would be great thanks.

Answer 1

You can do this by stopping event propagation at the #carousel level. This means that the current event being fired (dragging event etc) won't go as far as reaching Snap.js.

$('#carousel').on('mousedown touchstart', function (e) {
    e.stopPropagation();
});

Tested on mobile with the touchstart event too.

https://jsfiddle.net/chrispage1/o9whuLyw/2/