I am trying to use the js slider slick, but the default 'draggable' option does not work when I include the slider code on my site. More specifically, I cannot capture any mousemove events on the slide div, or on the document in my webpage (Chrome).
When run the code locally I have no problem observing the 'mouseup', 'mousemove', and 'mouseup' events, but when I put the slider code into the webpage I am only able to observe the 'mouseup' and 'mousedown' events.
Below is the working local code. If you run it, it will log the mousedown, mousemove, and mouseup events inside the slider div.
When I move the same code to the website I am not able to observe any mousemove events coming from the slider div, or from the document at all. Could there be some js running already that would completely prevent mousemove events from being fired by the page?
<html>
<head>
<title>My Now Amazing Webpage</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.css"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick-theme.css"/>
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.js"></script>
</head>
<body>
<style>
#container {
width: 450px;
height: 300px;
margin: 0 auto;
border: 2px solid black;
}
</style>
<div id="container">
<div class="your-class">
<div><img src="http://lorempixel.com/300/300" /></div>
<div><img src="http://lorempixel.com/300/300" /></div>
<div><img src="http://lorempixel.com/300/300" /></div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function(){
$('.your-class').slick();
$('.slick-slide').on('mousemove', function(e){
console.log("mousemove");
});
$('.slick-slide').on('mousedown', function(e){
console.log("mousedown");
});
$('.slick-slide').on('mouseup', function(e){
console.log("mouseup");
});
});
</script>
</body>
</html>
