Adding Margins Between Swiped Elements

[jonasll]

Hi,

I was playing around and trying to add 'padding' around the flickable cards, since right now they are all squeezed into one big pack. (Here's what it looks like when swiping from one card to another. I'd like to see some padding between these cards)

I've even added a supplemental div wrapping the card divs thinking the width would be calculated on the div that's a direct child to .slide-wrap, as such:

<div id='slider' class='swipe'>
  <div class='swipe-wrap'>
    <div class="card-wrap"><div class="card"></div></div>
    <div class="card-wrap"><div class="card"></div></div>
    <div class="card-wrap"><div class="card"></div></div>
  </div>
</div>

I've hacked my way through the script, but it only really works halfway and I am sure there is a much simpler answer. Any padding/margin configurations directly in SwipeJS? Am I missing something?

Thanks! and awesome plugin!

[jimmynotjim]

I built this into the early version of Swipe2 but it was shot down. Check out #94 for a lengthy discussion. If I find some time this week I'll try to update for the latest ver of Swipe.

[jonasll]

Thanks jimmy, it's the whole inline stuff that breaks the div in a div workaround, and I certainly don't want to use JS to listen to any mods to reapply the gutter width on the fly.

Thanks,

[jimmynotjim]

The main issue is that the plugin sets inline styles for the slide offsets and the width of the UL (so that none of the slides end up on a new line) based on the container width. Without fixing that there's nothing we can do with css, even inline or using !important, that will correctly set a margin between slides. You can see my working fix (using the old ver of Swipe2) on my project typecards.com. So far this is the only way I've been able to get it working correctly.

[jonasll]

Understood, typecards.com is a parked page though. can you share your fix in another fashion?

[jimmynotjim]

Oh heck, sorry, it's typecardsapp.com. Leave it to me to mis-type my own domain

[jonasll]

Can you explain the fix in a little more detail, how you achieved this. I
see the margin applied, but the translation is still totally wrong.

[jimmynotjim]

I added an option to the Swipe settings and then incorporated that measurement into all the calculations (left offests, translates, ul width, etc) and added the margin inline with all the other Swipe styles. I don't like the idea of an inline margin, but if I decided to change it in the options, I didn't want to risk forgetting to update it in the stylesheet.

The translation isn't wrong, I've just have too many other things going on that makes it look choppy on desktop. The whole app is still very experimental. If you view it on a small screen device it looks a lot better (I opted to make the mobile experience the top priority for now).

[jonasll]

No I guess my comment was that when I tried implementing your solution, the resulting translation was wrong on my side. Looking forward to you posting your fix later this week. Thanks,

[jimmynotjim]

Ah, well Brad rewrote everything a month or two ago, I just haven't had a chance to update to the new implantation. I'll see what I can do.