'slippry slider image slides displaying at once on page load
I'm using slippry slider for my carousel and the issue I have is that all the slides display in a list, then on page load then after about a second the slider fixes itsef as if the CSS has just loaded and the slider is working as it should be. So how do i stop all the slides flashing up at once for that one second?
Solution 1:[1]
If you take a look at the HTML after the slider is loaded and working, you'll notice that Slippry adds "opacity: 0: as a inline style to the slide elements (<li></li>). As it does it's magic, it simply turns the 0 into a 1 for the slide currently being displayed.
To work around this, (this may not be the best way) I have added made the opacity of the slides 0 via CSS, so nothing is displayed until Slippry is loaded. Slippry then adds the 1 for the active slide.
Solution 2:[2]
I got around this by initially having the list element hidden, then displayed once Slippry fires the onSliderLoad callback event.
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|---|
| Solution 1 | Usman Ali |
| Solution 2 | Phil |