A blank slide appears before the first actual slide.

[pratyushpundir]

I am not sure why this is happening. This is the markup for my slider:

HTML (with Twig):

<!-- Home Slider -->
<section class="home-slider">

    {% for slide in featuredSlider %}
    <!-- Single Slide -->
    <article>

        <!-- Slide Image -->
        <div class="image-content">
            <img src="{{ slide.background_image.getPath }}" alt="{{ slide.title }}">
        </div>
        <!-- Slide Image -->

        <!-- Slide Info Content -->
        <div class="slide-info">
            <h2 class="slide-title" style="color: {{ slide.text_color }}">
                {{ slide.title }}
            </h2>
            <p  class="slide-content" 
                style="color: {{ slide.text_color }}; border-top-color: {{ slide.text_color }};  border-bottom-color: {{ slide.text_color }}">
                {{ slide.content }}
            </p>
            <p>
                <a href="{{ slide.url }}" class="btn btn-link btn-primary btn-sm">
                    {{ slide.button_text }}
                </a>
            </p>
        </div>
        <!-- Slide Info Content -->

    </article>
    <!-- Single Slide -->
    {% endfor %}

</section>
<!-- Home Slider -->

and JS:

$(window).ready(function() {
    $('section.home-slider').slippry({
        slippryWrapper: '<section class="home-slider sy-box">',
        elements: 'article',
        adaptiveHeight: false,
        autoHover: false,
        captions: false,
        transition: 'horizontal',
        loop: true,
        responsive: true
    });
});

Screenshots:

1. The blank slide loads first - https://postimg.org/image/59norno6p/
2. The first actual slide (the one with flowers) starts loading in from top - https://postimg.org/image/utpyy39kh/
3. The first slide completely loads up and then the slider works as intended - https://postimg.org/image/4mtdfvgoh/

[sftsk]

Hello,

could you please send a link to the website? Please check with the html inspector if there is actual content on your first slide and if so did you add any custom css that might break the slippry defaults.

[pratyushpundir]

@sftsk Thanks for responding. You can check the site on my staging server here. The first slide is definitely not empty. So far, I have been unable to spot any css that might be interfering with Slippry.

[sftsk]

Seems like there is a problem with the initialisation. Slippry does not wait for the image of the first slide to be loaded for some reason and therefore the height of the slide is 0. As it moves to the second slide it seems to fix itself and from then on it works.

Slippry should wait for the images to be loaded but it seems like something is going wrong in your specific case. You can try wrapping the Slippry init call into this: http://imagesloaded.desandro.com as a quick fix

[pratyushpundir]

@sftsk I thought of the exact same fix in the past and used imagesloaded to circumvent the issue but so far it hasn't resolved the issue at all. Any other ideas or pointers on where the issue might be rooted?

Here's the staged site with imagesloaded being used.

[sftsk]

Hello again, have taken a quick look. Could you try leaving the text out and see if the slide still shows up as empty?

I think the absolute positioning might be causing some issues but it is difficult for me to debug.

The other test would be to keep the same slider without all the surroundings, just to see if that makes anything better.

[pratyushpundir]

@sftsk Removing the text content (along with any absolute positioning) is still not helping. Also, I setup a test page with nothing but the slider and it still has the same issue. I really can't put my finger on the problem here.

[pratyushpundir]

I found the issue. I was forcing a display: none; on .sy-loading since I did not wish to use that. The slider works as intended if I allow .sy-loading to be displayed. I have worked around this for now. Thanks for the help!

[sftsk]

glad to hear :)

[reneedicherri]

Hi there! I'm a newb. I am sorry. But I'm pretty sure I'm getting this same issue and I'm not sure why.

Here's my test site:

http://reneedicherri.com/new/

There's two slideshows - one under illustration and one under design, and they both refuse to load the first image on the first click. After slippry has been advanced to the second slide, the first image works but only then.

Would you mind taking a look?

[pratyushpundir]

@reneedicherri Make sure you aren't setting a display: none; on the .sy-loadingclass. That was my issue!

[reneedicherri]

@pratyushpundir Thanks! I saw that - is .sy-loading set to that by default? I'm certainly not trying to set that on purpose. Again, I'm a newb, so something may be making that happen inadvertently due to my newbishness.

[pratyushpundir]

@reneedicherri no it's not set that way by default. Have you tried using this http://imagesloaded.desandro.com/? It might be because your image hasn't loaded before the slider starts running. And don't worry about it. Development is just a giant learning experience.