/    Sign up×
Community /Pin to ProfileBookmark

HummerJS not working

I need some help with HummerJs. I don’t know how to make it work and I can’t find tutorials for it.
https://codepen.io/raul-rogojan/pen/KKPQjZZ?editors=0010

to post a comment
JavaScript

7 Comments(s)

Copy linkTweet thisAlerts:
@VITSUSASep 11.2019 — This website may be helpful for you - https://hammerjs.github.io/examples/
Copy linkTweet thisAlerts:
@codyhillauthorSep 11.2019 — @VITSUSA#1608639 It's the site that I used.
Copy linkTweet thisAlerts:
@codyhillauthorSep 11.2019 — @VITSUSA#1608639 Something works because when I wrrite the swipe code now the scroll jumps to the 3rd section. But it does not work with swipes.
Copy linkTweet thisAlerts:
@SempervivumSep 11.2019 — I modified your pen to this one:

https://codepen.io/Sempervivum/pen/NWKMgmj?editors=0110

Obviously the pan event fires multiplely. I recommend using the swipe event instead:

https://codepen.io/Sempervivum/pen/yLBjzpN?editors=0110

Not perfect as the slide starts moving only when swiping is finished.
Copy linkTweet thisAlerts:
@codyhillauthorSep 11.2019 — @Sempervivum#1608669 Awesome THX!

Some questions:
  • 1. From where you got nextBtn.click();? Is that built-in JS?

  • 2. Any idea how I can make it not move only when the swipe ends, or is it just like that because the button uses scrollIntoView function?
  • Copy linkTweet thisAlerts:
    @SempervivumSep 11.2019 — 
  • 1. Yes, this is a built in feature:

    https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/click


  • 2. This might grow a bit more complex. You need to use the pan event and move the slide according the movement of the mouse or finger. When releasing the mouse or finger: Calculate the speed of panning. When panning was slow, slide back to the old position. When panning was fast enough, animate the slide's position so that is moves to it's final, new position.


  • The swiper plugin implements this very fine.
    Copy linkTweet thisAlerts:
    @codyhillauthorSep 11.2019 — @Sempervivum#1608672 Oh yeah seems complicated.... I leave it as a swipe. I'll try to look for some tutorials but I don;t think I will find any. Thx again!
    ×

    Success!

    Help @codyhill spread the word by sharing this article on Twitter...

    Tweet This
    Sign in
    Forgot password?
    Sign in with TwitchSign in with GithubCreate Account
    about: ({
    version: 0.1.9 BETA 4.25,
    whats_new: community page,
    up_next: more Davinci•003 tasks,
    coming_soon: events calendar,
    social: @webDeveloperHQ
    });

    legal: ({
    terms: of use,
    privacy: policy
    });
    changelog: (
    version: 0.1.9,
    notes: added community page

    version: 0.1.8,
    notes: added Davinci•003

    version: 0.1.7,
    notes: upvote answers to bounties

    version: 0.1.6,
    notes: article editor refresh
    )...
    recent_tips: (
    tipper: @Yussuf4331,
    tipped: article
    amount: 1000 SATS,

    tipper: @darkwebsites540,
    tipped: article
    amount: 10 SATS,

    tipper: @Samric24,
    tipped: article
    amount: 1000 SATS,
    )...