I don't know how to use hammer.js to transition my slides

JavaScript
#1

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

#2

Is hammer.js too little used for people to be familiar with it, or is it the wrong tool for this job?

#3

I don’t know much javascript but I can see a flaw in the way you are doing this.

You want the swipe gesture to do what the chevrons do in the W3schools code. This code shows that clicking on the “previous” button does this:

onclick="plusSlides(-1)"

and clicking on the “next” button does this:

onclick="plusSlides(1)"

In other words clicking on them runs the js function plusSlides and passes to the function either a “1” or a “-1” depending on which direction you wish to proceed.

In order to use a swipe gesture then you just need to use the hammer code for recognising swipes and on getting a left or right swipe then carry out the same functions as the clicks.

In other words, the navigation is just increasing or decreasing a counter that determines which slide to display.

#4

This gives me a huge hint on how to proceed. Thanks!

#5

You’re welcome. I’d be interested to find out if it turns out to be as simple as I made it seem! And let us know if yoou have any problems.

#6

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.