search

metafizzy / flickity-docs

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

Single Image view & responsive Image #40

Closed DeeLete closed 7 years ago

DeeLete commented 8 years ago

Forgive me if posting the wrong place: but cannot find help for Flickity. have tried stackoverflow, but others appear to have similar questions with no answers. Or help me to a forum or page with Q&A section.

Can any help set up Flickity to display only ONE photo at a time (with NO edges from other photos on the side), while being responsive.

Thank You

bjtalbot1 commented 8 years ago

Same question, thanks for any help

dspattenbc commented 7 years ago

Hi. Came across this question as was looking for the same solution. For anyone that is still looking, all I've done is to add a class to the carousel-cell that declares a min-width of 100% and text-align:center so as to keep my image aligned to the middle.

For example, my HTML:

<div class="carousel">
<div class="carouselCell single"><img src="" alt=""></div>
<div class="carouselCell single"><img src="" alt=""></div>
<div class="carouselCell single"><img src="" alt=""></div>
</div>

With CSS:

.single {min-width: 100%; text-align: center}

Works for me.

Thanks, David

desandro commented 7 years ago

Yes! See this modified lazyLoad demo: https://codepen.io/desandro/pen/d06252fe9e7b427f5846fd1e47604464/

It works by using cell elements and images within them. The cells have full width.