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

[vicding]

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]

Could you please provide a jsbin or something live, it is difficult to understand your problem. What do you mean by an "auto-hiding menu"?

[vicding]

Thanks for the prompt reply. herewith the jsbin link to the mobile version which does not work.

This is the PC version of the menu bar with happy customer slider using Swipes

In the Mobile version, visitor has to click the link to see the menu bar

Menu bar in the mobile version does not show the slides, but only the title

In mobile version, the menu bar is hidden by default and only be seen when the menu button is clicked.

[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();
});

[vicding]

Thanks for the help. I'll try and revert.

[augustom87]

having same issue, did you find any solution?

[augustom87]

having same issue, did you find any solution?

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