Materialize: First slider not showing up initially

Created on 25 Apr 2015 · 12Comments · Source: Dogfalo/materialize

The first slide in the slider is always blank, right after the page with the slider loads. The first page show up only after the slider has cycled through the other pages.

bug

Source

vacquah

👍1

Most helpful comment

I had the same issue, I tried to use slider without images and whenever the slider loads it does not immediately show the content of the first slide.
It works with adding an empty img tag.

simicic on 24 Oct 2015

👍3 ❤1

All 12 comments

Could be a result of the error in the JS console that I am seeing on your page.

Dogfalo on 25 Apr 2015

the one related to pagepiling? It still occurs without it. i can remove the page piling plugin and you can check it out again. It also happened on another build i had with materializecss

update - removed the other plugin. There are no console errors now ... please checkout again

vacquah on 25 Apr 2015

It seems it is a problem with opacity: 0 on the .caption inside the first slide. Not sure right now if this is just a problem on your site or in Materialize.

Dogfalo on 25 Apr 2015

I haven't set any opacity rules at all in my css for the slider

ps: putting the other plugin code back now. Just wanted to show it still happens without it.

vacquah on 25 Apr 2015

My slider does not work too :( However when I run the plugin code in my console it works fine. Without that I am getting a grey screen.

vitesh-youreka on 8 Jul 2015

EDIT: Fixed by adding and <img> tag to the first slide.

Not sure what I did, slider was working? Now the first slide does not show caption on-load. No errors in console and js is triggered but not completed? I do not see velocity-animating until first transition...

On load first slide does not show caption, no velocity-animating changing values:

<li class="active" style="opacity: 1;">
    <div class="caption center-align" style="opacity: 0; transform: translateY(-100px);">
    </div>
</li>

This does not happen on load, but only after slide cycle has begun...

<li class="velocity-animating active" style="opacity: 0.0594076290273974; transform: translateX(0px) translateY(0px);">
    <div class="caption right-align velocity-animating" style="opacity: 0; transform: translateX(100px) translateY(0px);">
    </div>
</li>

After slide transition, and velocity-animating changing values, and the slide caption drops in, on all slides, this does not happen on load?

<li class="active" style="opacity: 1; transform: translateX(0px) translateY(0px);">
    <div class="caption center-align" style="opacity: 1; transform: translateY(0px) translateX(0px);">
</li>

champa720 on 13 Jul 2015

I had the same issue, I tried to use slider without images and whenever the slider loads it does not immediately show the content of the first slide.
It works with adding an empty img tag.

simicic on 24 Oct 2015

👍3 ❤1

still affected.

ibart on 21 May 2016

This is still an issue - as others have said, adding an empty <img> tag fixes it, but this is not really an ideal solution. Are there any updates on a fix?

dmallory42 on 30 Jun 2016

I also encountered this issue. Adding the empty tag fixed it.

clstia on 12 Jul 2016

Did anyone found a more elegant solution to this?
(cc @Dogfalo )

thebiltheory on 23 Nov 2016

I got some problem and its wasting my time to find the problem. I fix problem by replacing materialize.js from /bin/ folder! try and tell me if resolved.