contao-components/swipe

JavaScript touch slider with additional dot menu

swipe's Issues

swipe.js is spamming console

2017-04-07 10:27:21.668 swipe.min.js:2 Uncaught TypeError: Cannot read property 'getAttribute' of undefined at HTMLAnchorElement.O.next (swipe.min.js:2)

Error message happens if clicked on navigation button (prev, next) or on it's own after a few seconds.

No additional configuration outside of the content element has been done to the structure or JS.
Any workaround for this?

Multiple timeouts triggered on css changes

I am building a website with functions for better accessibility. One of these functions changes the global font-size. I noticed, that this also shortened the delay of the slider interval dramaticly.

You can reproduce the issue on the contao demopage. Add another font-size to the body-tag with developer tools. Removing and adding it several times increases this effect.

https://demo.contao.org/

The problem is, that global changes on the webpage can cause an additional transition inside the slider. Every "transitionEnd"-Event calls the function "begin" which starts a new timeout.

I think clearing a running timeout in the "begin" function is one of the simplest solutions for this problem.

function begin() {

  if (interval != null) clearTimeout(interval);
  interval = setTimeout(function(){
    interval = null;
    next();
  }, delay);

}

It shouldnt be a problem to run clearTimeout multiple times on the same ID, so the function could also just look like this.

  function begin() {

    if (interval != null) clearTimeout(interval);
    interval = setTimeout(next, delay);

  }

Make eventlisteners passive

Chrome DevTools suggest marking the eventlisteners on touch, scroll etc. events as passive, as long as the listeners don't need to cancel the event, to improve performance. I would think that doing so might slightly improve performance and would at least silence the devtools complaining.

Disable or hide prev/next buttons when at begining or end

It would be a great addition if the script could just add additional classes to the prev/next buttons if the start/end positions are reached to hide or disable them via css if needed (In non continuous mode).

With the actual implementation the user can click the buttons and nothing happens. With only one slide in the collection the buttons are completly useless right now.

I can help with that and create a pull request with this changes but maybe keep this open for discussion first - additionally I'm not sure what plans you have for swipe.js in Contao 5...

Use actual page numbers for the menu

In my opinion it would be better to use the actual page numbers for the slider menu instead of '•'. They make much more sense from a syntax perspective and you can more easily adjust them to your needs.

You could still style it the way it is now using css, but would be more flexible