width set to 0 for div 'swipe-wrap' and all the elements div in it

Hi, I am using swipe in the auto-hiding menu, in the mobile version, the menu will only slide out when the menu button is clicked. The swipe module works fine in the pc version, but does not work in the iPad or mobile version. There are 2 issues I can currently observe

1. div width set to 0 for both swipe-wrap and all its elements
2. the js is not running through the divs. The js file suppose to change the attributes and make the slide ‘run’, but none of the <div> was changing.

Here is the html in pc version:

<div class="swipe" id="st-quotes" style="visibility: visible;">
<div class="swipe-wrap" style="width: 570px;">

<div data-index="0" style="width: 190px; left: 0px; transition-duration: 400ms; transform: translate(-190px, 0px) translateZ(0px);">slide1
</div>

<div data-index="1" style="width: 190px; left: -190px; transition-duration: 400ms; transform: translate(0px, 0px) translateZ(0px);">slide2
</div>
<div data-index="2" style="width: 190px; left: -380px; transition-duration: 0ms; transform: translate(190px, 0px) translateZ(0px);">slide3
</div>
</div>
</div>

And this is the html in mobile version:

<div class="swipe" id="st-quotes" style="visibility: visible;">
<div class="swipe-wrap" style="width: 0px;">

<div data-index="0" style="width: 0px; left: 0px; transition-duration: 0ms; transform: translate(0px, 0px) translateZ(0px);">slide1
</div>

<div data-index="1" style="width: 190px; left: 0px; transition-duration: 0ms; transform: translate(0px, 0px) translateZ(0px);">slide2
</div>
<div data-index="2" style="width: 190px; left: 0px; transition-duration: 0ms; transform: translate(0px, 0px) translateZ(0px);">slide3
</div>
</div>
</div>

Thanks for any help and tip in advance!

[loup-brun]

I think that Swipe sets the width according to actual space taken up by the slides. On the mobile version, the slides are invisible, and thus take up no actual space (so there’s where the 0px comes from).

One way to deal with this is to trigger the Swipe setup method when the menu is shown. In the code, it could look like this for instance:

showMenu(); // show the menu, the way you implement it
mySwipe.setup(); // now that the menu is shown, setup the slides

With jQuery, it could look like this:

$('#menu').show(function() { // callback function
  mySwipe.setup();
});

[augustom87]

having same issue, did you find any solution?

calling mySwipe.setup({options}) with initial options before showing swipe again worked for me