lyfeyaj / swipe

Swipe is the most accurate touch slider. Support both React and Angular.

Home Page:https://swipe.js.org

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Issue with 2 Slides

talanw opened this issue · comments

Current got an issue when trying to deploy this using two slides. The JS file seems to create duplicated divs as follows:

image

here is the JS code
var elem = document.getElementById('todaySwipe');
console.log(elem);
var newswipe = Swipe(elem, {
draggable: true,
});

and here is the HTML before the Swipe function is added:

It's quite odd, I have another swipe element on this page which is generated in another function which works fine as it has four slides, also, if I drop this other element to three slides or increase the one that I am struggling with to three then it is fine. Any help would be appreciated.

sorry here is the original HTML:
image

Hi,

I'm pretty sure this is intentional by design. 2 slides is a special case because you need the next slide to be on either side (right or left) of the current one.

@lyfeyaj could confirm.

Hi,

I think you are right regarding this and I think the issue is because I am loading charts from one of the javascript charting libraries so the cloned divs have nothing in them as the javascript selector for the charting library is an ID and doesn't exist in the cloned div containers. Just for anyone who might run into this problem in the future, just duplicate the container divs in your code and generate the same charts by selecting container 0, 2 and 1, 3 respectively in your charting library code. This will increase your memory usage a little depending on your project.

Thanks for confirming what I thought to be the case.