CODEWITHSUNDEEP
jquerycssslick.js
LauraNMS
LauraNMS

Reputation: 2853

Slick carousel - If fade in parent element, then first image doesn't show

I'm using Ken Wheeler's slick carousel.

The parent element of my slideshow is faded out (fadeOut()).

When I click something, I want the parent element and the slideshow to fade in.

All works well except on mobile phones, at least on Android. On my Android phone, the first image doesn't load.

If I don't fade the parent element out, but just set the opacity to 0, then the first image of the slideshow shows up, but I have a big space on my homepage where that invisible element is.

Anyone know how to handle this please?

jQuery:

$('.bridge_story_mobile').fadeOut(); // they need to be display:block 

$('.bridge_holder').on('tap', function() {
    var mobile_toshow = $(this).attr('id');
    mobile_toshow = mobile_toshow.replace('holder_', '');
    mobile_toshow = mobile_toshow + "_mobile";

    $('#' + mobile_toshow).detach().insertAfter('.bridges_wrapper');

    $('.bridges_wrapper').fadeOut(1200, function() {
        $('.bridge_story_mobile').css('display', 'none');
        $('#' + mobile_toshow).css({"opacity":"0", 'display':'block'});
        $('#' + mobile_toshow).animate({"opacity":"1", 'z-index':'2'},2000);
        $('.mobile_close').animate({"opacity":"1", 'z-index':'99'},2000);
        var $slider = $('.slider')
            .on('init', function(slick) {
                console.log('fired!');
                $('.slider').fadeIn(3000);
            })
            .slick({
                fade: true,
                focusOnSelect: true,
                lazyLoad: 'ondemand',
                speed: 1000
            });
        $('html,body').animate({
              scrollTop: $("#mobile").offset().top -0
        }, 1500);
    });
});

Upvotes: 0

Views: 867

Answers (1)

Serg Chernata
Serg Chernata

Reputation: 12400

The problem seems to be that because you initialize the plugin while html is hidden, it gives all divs a size of 0px.

enter image description here

To fix, you could run a refresh on each of your slideshows once they are visible:

$('#ss_mobile_mainstory')[0].slick.refresh();

Upvotes: 1

Related Questions