Menu
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>
460
Not sure if this answers your specific question, but it might be helpful for others that turn up here.
If you're testing using Chrome dev tools (say) and you have a device profile active, then Chrome will emulate touch interaction and not send mousemove events (as would be the case for a phone/tablet where the browser can't tell when the users finger if it's not touching the screen).
If you change the device type from (eg) "Desktop (touch)" to just "Desktop", you'll keep the desired screen size, but gain back the mouse events.
85
The problem was that specific chrome tab. I don't know why I was having issues, but refreshing it didn't change anything--but when I loaded the site in an incognito window and a new chrome window it fixed it.
The only thing that was different between the tabs was that the one I was having the issue in had been open for a much longer time (~3-4 hours). I don't know why that would affect anything, but I would love to hear what someone thought if they had any ideas.
36
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
