I’m using the slideshow code from here, https://www.w3schools.com/howto/howto_js_slideshow.asp , and want to use hammer.js here, https://hammerjs.github.io/recognizer-swipe/ , to be able to swipe from slide to slide. The slides are composed of text, bullet points, and images.
The basic implementation of hammer.js is found in https://codepen.io/jtangelder/pen/lgELw , where we have this code:
#myElement {
background: silver;
height: 300px;
text-align: center;
font: 30px/300px Helvetica, Arial, sans-serif;
}
But I don’t know how to connect it up with the HTML,
<div class="mySlides fade" id="slideone">
<div class="numbertext">1 / 3</div>
<img src="img1.jpg" style="width:100%">
<div class="text">Caption Text</div>
</div>
<div class="mySlides fade id="slidetwo"">
<div class="numbertext">2 / 3</div>
<img src="img2.jpg" style="width:100%">
<div class="text">Caption Two</div>
</div>
If I change #myElement {
to #slideone {
so it works with my format, I don’t see how hammerjs knows to go from #slideone to #slidetwo.
Can someone give me a hint? Opening hammer.js shows everything on a single line, so I’m pretty sure it’s not to be edited, https://hammerjs.github.io/dist/hammer.min.js
Above the opening body tag I have
<script src="css/hammer.js"></script>
Above the end body tag I have
<script>
var myElement = document.getElementById('slideone');
// create a simple instance
// by default, it only adds horizontal recognizers
var mc = new Hammer(myElement);
// listen to events...
mc.on("panleft panright tap press", function(ev) {
myElement.textContent = ev.type +" gesture detected.";
});
var hammertime = new Hammer(myElement, myOptions);
hammertime.on('pan', function(ev) {
console.log(ev);
});
</script>
How does it get from #slideone to #slidetwo? (There are ten slides in all.)