Image disappears in carousel mode (jQuery Swiper plugin)

0
votes

I am using iDangero.us Swiper plugin for homepage slider, and I encountered a peculiar problem in all browsers. I have 4 slides (each is a div with a background image and some text and images inside), and all looks fine until I swipe (or click the Next button) to go from the last slide to come to the first one. The new slide appears totally white, and it only takes a slight dragging to make it appear properly.

Interestingly, this does not happen if I scroll backwards (drag the slider to the left or click the Back button).

The demo is here: https://dl.dropboxusercontent.com/u/13308449/design-boost/index.html

What might cause this behaviour and how can I fix it?

1
jquerysliderswiper
When swiping to the left, I only get first 4 divs. Swiping to right brings 5th one, but last one just stays below window ... Your stuff is all messed up! – SpYk3HH
I'm not sure as I'm not familiar with that exact plugin in, but it appears that the last div stays below the previous ones. I'm guessing this is some width issue with the container, thus it's being moved to next line, which is below window as all the divs are full screen – SpYk3HH
In other words, it's not really below window view, I mispoke. It's merely below the wrapper of the slidder plug with all the other divs. Also, if I swipe again, it starts at 3rd div, not first – SpYk3HH
Yea, if I make your wrapper bigger, last div pops in just fine – SpYk3HH
I think I found the problem. If I remove the margin-right on the visible slides, it all works fine. Like you said, the issue was not with the plugin, it's my CSS that's messed up. Apparently, the container's width is calculated by the plugin and it probably does not take into account the margins of the slides (or something like that) causing the container to be smaller than it should be. Thanks for your help, it made me look in the right place. – parrker9

1 Answers

1
votes

The problem was with the margin-right: 10px being applied to visible slides, so the problem was not in the plugin, but my CSS. Apologies.