Disable click event when dragging embla carousel

See original GitHub issue

it’s ok no problems i found solution by using pointerDown pointerUp

embla.on('pointerDown', (eventName) => { console.log('function happen'); });

embla.on('pointerDown', (eventName) => { console.log('function happen'); });

here is code for all who search for it too.

import { setupPrevNextBtns, disablePrevNextBtns } from "./prevAndNextButtons";
import { setupDotBtns, generateDotBtns, selectDotBtn } from "./dotButtons";

let time = 200;

let t = setTimeout(test, time);

function test() {
  console.log('embla timeout started');
}

function disablePointerEvents() {
  let elemArr = document.querySelectorAll('.drop-link');
    for(let i = 0; i < elemArr.length; i++) {
      elemArr[i].classList.add('disabled');
    }
}
function enablePointerEvents() {
  let elemArr = document.querySelectorAll('.drop-link');
    for(let i = 0; i < elemArr.length; i++) {
      elemArr[i].classList.remove('disabled');
    }
}

const setupEmblaCarousel = (emblaNode, options) => {
  const viewPort = emblaNode.querySelector(".embla__viewport");
  const prevBtn = emblaNode.querySelector(".embla__button--prev");
  const nextBtn = emblaNode.querySelector(".embla__button--next");
  const dots = emblaNode.querySelector(".embla__dots");
  const embla = EmblaCarousel(viewPort, options);
  const dotsArray = generateDotBtns(dots, embla);
  const setSelectedDotBtn = selectDotBtn(dotsArray, embla);
  const disablePrevAndNextBtns = disablePrevNextBtns(prevBtn, nextBtn, embla);

  setupPrevNextBtns(prevBtn, nextBtn, embla);
  setupDotBtns(dotsArray, embla);

  embla.on("select", setSelectedDotBtn);
  embla.on("select", disablePrevAndNextBtns);
  embla.on("init", setSelectedDotBtn);
  embla.on("init", disablePrevAndNextBtns);

  embla.on('pointerDown', (eventName) => {
    
    clearTimeout(t);
    t = setTimeout(disablePointerEvents, time);
    

  });

  embla.on('pointerUp', (eventName) => {

    clearTimeout(t);
    t = setTimeout(enablePointerEvents, time);

  });

};

const options = { loop: false };
const emblaNodes = [].slice.call(document.querySelectorAll(".embla"));
const emblaCarousels = emblaNodes.map(emblaNode =>
  setupEmblaCarousel(emblaNode, options)
);

sorry about that! if you know better way to do it please tell me! best reggards from Vlad!

Issue Analytics

  • State:closed
  • Created 3 years ago
  • Reactions:1
  • Comments:14 (4 by maintainers)

github_iconTop GitHub Comments

2reactions
davidjerlekecommented, Feb 27, 2021

Hi @vladtabachuk,

embla.clickAllowed() has been stable for a long time now. Please create a CodeSandbox with your setup that demonstrates the issue. It’s hard for me to guess what could be wrong when I don’t have the whole picture. That will enable me to debug your code instead of guessing what could be wrong 🙂.

Kindly David

2reactions
davidjerlekecommented, Feb 27, 2021

If you’re using a script tag, try including this, it should give you the latest version:

<script src="https://unpkg.com/embla-carousel@latest/embla-carousel.umd.js"></script>

If you’re using a module bundler install the latest version like so:

npm install embla-carousel@latest --save
Read more comments on GitHub >

github_iconTop Results From Across the Web

Disable click event when dragging embla carousel · Issue #146
it's ok no problems i found solution by using pointerDown pointerUp embla.on('pointerDown', (eventName) => { console.log('function happen'); } ...
Read more >
Click Events - Embla Carousel
This guide demonstrates how to setup click events on your slides, ... will only act if the pointer interaction is a click event...
Read more >
React : ignore the onClick event when scrolling-y
Prevent clicks when the carousel is clicked during scroll. If the pointer is mouse, Embla will: Prevent a click when the gesture is...
Read more >
Is there a way to disable the click and drag function?
Is there a way to disable the click and drag function? · 1. Go to Plugins folder, select post-type-slider · 2. Go to...
Read more >
embla-carousel - npm
Allow drag interactions to scroll the carousel. This option enables for scrolling the carousel with mouse and touch interactions. They're are ...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found