Img overlap - Githubissues

nolimits4web / swiper

Most modern mobile touch slider with hardware accelerated transitions

https://swiperjs.com

MIT License

39.97k stars 9.75k forks source link

Img overlap #2013

Closed nam-co closed 7 years ago

nam-co commented 7 years ago

This is a (multiple allowed):

[x] bug

Hello, hope somebody can help me, I using the fade effect but Im getting this overlap of images, how can I fix this? I tried this css but it didn't work, appreciate any help

.swiper-slide { min-height: 100%; background-color: white !important; }

JacobDB commented 7 years ago

I'm guessing that photo is supposed to rotated 90 degrees, right? If so, it's not working because each slide is only the height of it's contents. To adjust for this, add this to your CSS:

.swiper-slide {
    flex-grow: 1;
    height: auto;
}

That should allow you to set a background color on .swiper-slide as you're trying to do.

nolimits4web commented 7 years ago

Issue is closed because of outdated/irrelevant/not actual/needed more information/inactivity.

If this issue is still actual and reproducible for latest version of Swiper, please create new issue and fill the issue template correctly:

Clearly describe the issue including steps to reproduce when it is a bug.
Make sure you fill in the earliest version that you know has the issue.
Provide live link or JSFiddle/Codepen or website with issue

ockle commented 6 years ago

@nam-co I know this is a year old, but I had the same issue and found this bug, so in case you or anyone else who finds this wants to make this work as expected, you need to set:

fadeEffect: {
  crossFade: true
}

(see http://idangero.us/swiper/api/#fade-effect)