search

metafizzy / flickity-docs

:memo: documentation for Flickity
28 stars 8 forks source link

Preventing all images butting up against each other ? #55

Closed astagax closed 4 years ago

astagax commented 6 years ago

Help needed.

I just can't figure how to prevent all images from butting up against each other in the Flickity carousel. FYI, I have all images of the same X by Y pixel size (ie. 600x400). I've tried several approaches, but my images still comes up butt edging against one another.

For now I've added a 10px colored border down the left and right edge of all my images (thereby making all my images to be 620x400 pixels) to visually get around this, but I'm sure it must be a simple setting or parameter I am missing.....

I am hoping to achieve the same look as in the example illustrated at https://codepen.io/desandro/pen/d06252fe9e7b427f5846fd1e47604464/ where there is a nice white separation strip between images. I am using the same HTML/CSS source code there as my model, but my images still come up edge butted.

What am I missing or overlooking? Appreciate and grateful for any help. Thank you in advance,

desandro commented 6 years ago

Have you tried using imagesLoaded or lazyLoad ?

astagax commented 6 years ago

@desandro

Yes, I have tried replicating exactly the example code with exact images (just to be sure) but am still finding the images edge butting into each other, as shown below: image

They look fine on your site, with nice black edge bands and a white separator between images, as seen here: image

I can't still fathom it out ? What did I miss? Appreciate any and all help.

Regards.

desandro commented 6 years ago

I'm sorry to see you're having trouble with Flickity. Could you provide a reduced test case? See Submitting Issues in the contributing guidelines.

astagax commented 6 years ago

Hi Dave, I'm sorry It took awhile for me to get back to you.I've tried to revisit and understand the options/code/syntax, but unfortunately till now am still unable to get an outcome similar to what I am seeing  with your demo. The best way for me is to use your recent work you have shared here:https://codepen.io/desandro/pen/aYmaEv

I have copied exactly your example (HTML, CSS and added the 2  links) in my test.html file.

When I run it, I couldn't get the same visual outcome I see with your example. In your case, I get following result:

In my case, the screen I see is the following:

My images are all butted edge to edge. I am completely stumped...I can't, till this time, figure it out ????

Just in case, my test.html is attached... Regards, and deeply appreciative of the help... Thanks,Tim

On Wednesday, May 16, 2018 11:35 PM, David DeSandro <notifications@github.com> wrote:

I'm sorry to see you're having trouble with Flickity. Could you provide a reduced test case? See Submitting Issues in the contributing guidelines.— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub, or mute the thread.

desandro commented 6 years ago

Sorry, I don't have visibility to your attachments. These emails are being created by GitHub. See issue at https://github.com/metafizzy/flickity-docs/issues/55#issuecomment-395952620

Please try forking the CodePen.