revolunet / angular-carousel

Mobile friendly AngularJS carousel
http://revolunet.github.io/angular-carousel
MIT License
1.55k stars 705 forks source link

Background Undeflow #208

Open JeffN825 opened 10 years ago

JeffN825 commented 10 years ago

I have a carousel defined as follows:

<ul class="image carousel" rn-carousel rn-carousel-buffered rn-carousel-indicator>
    <li ng-repeat="photo in profile.photos"
        ng-style="{ backgroundSize: 'auto 300px', backgroundPosition: 'center', backgroundRepeat: 'no-repeat', backgroundImage: 'url(' + photo.source + ')' }">
        <div class="layer"></div>
    </li>
</ul>

And the following classes defined

.carousel { position: relative; margin: auto; background-color: #eeeeee; border: 1px solid #ddd; max-width: 1170px; height: 300px; }

.carousel img { bottom: 0; left: 0; margin: auto; max-height: 100%; max-width: 100%; position: absolute; right: 0; top: 0; }

.carousel li { overflow: hidden; position: relative; text-align: center; }

On every slide except the first one, there is about 3px of "underflow", meaning the current slide takes up about n - 3px of the visible panel size...and on the right edge you can see 3px of the next slide. Any advice on how to resolve this?

I'm using PhoneGap with Ripple emulator and Ionic Framework, if that makes a difference.

Thanks.

revolunet commented 10 years ago

strange, this looks like a css issue. in the current version, the carousel detects the container width on initialisation. looks like the detected width is not the real one. can you try to log something here : https://github.com/revolunet/angular-carousel/blob/master/src/directives/rn-carousel.js#L178 and inspect in your browser to see if there's a difference ? If so you have to find which css rule it comes from.

JeffN825 commented 10 years ago

There isn't a different with the version you provided. Interestingly, the width seems correctly fixed at 278px...the problem seems to be with the slider. The first slid is fitted perfectly. The second slide is about 2px too far to the left. The third slide is about 4px too far to the left.

When I say too far to the left, I mean that px on the left are getting cut off and I'm seeing those px on the right side from the next slide.

Each slide gets a tiny bit more offset.

revolunet commented 10 years ago

could be cool if you can try if you get the same behaviour with the new version

revolunet commented 9 years ago

bump. if you have a plunker with the reproduced problem i can look at it