Images stack while slick slider is loading

[GuilleMos]

Hi there,

I implemented slick slider on a Shopify website and everything works very well but the only issue is that the images stack at bottom of each other while the page is loading.

Once it is completely load the images jump back to where they should.

I tried to solve this issue in many different ways and the best way looks to be via CSS using "visibility: hidden;" however I can not find the way to make this work.

Is there a way to fix this problem while it is loading?

This is the Shopify code I am using right now:

<div id="details">
  <div class="slick-slider">
    <div>
      <div class="featured-link-image-overlay">
        {% if section.settings.image1 %}
        <div id="back1" class="image_background" role="img" aria-label="{{ section.settings.image1.alt }}" style="height: {{ section.settings.image_height_slider }}px; background-image: url({% if section.settings.image1 != nil %}{{ section.settings.image1 | img_url: '2048x' }}{% else %}{{ 'placeholder.svg' | asset_url }}{% endif %}); {% if section.settings.parallax_effect %} background-attachment: fixed; {% endif %}"></div>
        {% endif %}
      </div>
      <div class="featured-link-text-overlay" style="top: {{ section.settings.text_vertical }}%;">
        <div class="slider-text-alignment" style="text-align: {{ section.settings.text_horizontal }};">
          <h3 class="slider-title-size" style="padding: 0 5%; color: {{ section.settings.title_color }}; font-size: {{ section.settings.title_size }}px; font-weight: {{ section.settings.title_weight }};">
            {{ section.settings.title }}
          </h3>
          {% if section.settings.text != blank %}
          <div class="description" style="padding: 0 5%; color: {{ section.settings.description_color }}; font-weight: {{ section.settings.description_weight }};">{{ section.settings.text }}</div>
          {% endif %}
          {% if section.settings.button_label != blank %}
          <a {% if section.settings.button_link != blank %} href="{{ section.settings.button_link }}" {% endif %} class="action_button block_button">
            {{ section.settings.button_label }}
          </a>
          {% endif %}
        </div>
      </div>
    </div>
    {% if section.settings.image2 != blank %}
    <div>
      {% if section.settings.image2 != blank %}
      <div class="featured-link-image-overlay">
        {% if section.settings.image2 %}
        <div id="back2" class="image_background" role="img" aria-label="{{ section.settings.image2.alt }}" style="height: {{ section.settings.image_height_slider2 }}px; background-image: url({% if section.settings.image2 != nil %}{{ section.settings.image2 | img_url: '2048x' }}{% else %}{{ 'placeholder.svg' | asset_url }}{% endif %}); {% if section.settings.parallax_effect %} background-attachment: fixed; {% endif %}"></div>
        {% endif %}
      </div>
      {% endif %}
      <div class="featured-link-text-overlay" style="top: {{ section.settings.text_vertical2 }}%;">
        <div class="slider-text-alignment" style="text-align: {{ section.settings.text_horizontal2 }};">
          <h3 class="slider-title-size" style="padding: 0 5%; color: {{ section.settings.title_color2 }}; font-size: {{ section.settings.title_size2 }}px; font-weight: {{ section.settings.title_weight2 }};">
            {{ section.settings.title2 }}
          </h3>
          {% if section.settings.text2 != blank %}
          <div class="description" style="padding: 0 5%; color: {{ section.settings.description_color2 }}; font-weight: {{ section.settings.description_weight2 }};">{{ section.settings.text2 }}</div>
          {% endif %}
          {% if section.settings.button_label2 != blank %}
          <a {% if section.settings.button_link2 != blank %} href="{{ section.settings.button_link2 }}" {% endif %} class="action_button block_button">
            {{ section.settings.button_label2 }}
          </a>
          {% endif %}
        </div>
      </div>
    </div>
    {% endif %}
    {% if section.settings.image3 != blank %}
    <div>
      {% if section.settings.image3 != blank %}
      <div class="featured-link-image-overlay">
        {% if section.settings.image3 %}
        <div id="back3" class="image_background" role="img" aria-label="{{ section.settings.image3.alt }}" style="height: {{ section.settings.image_height_slider3 }}px; background-image: url({% if section.settings.image3 != nil %}{{ section.settings.image3 | img_url: '2048x' }}{% else %}{{ 'placeholder.svg' | asset_url }}{% endif %}); {% if section.settings.parallax_effect %} background-attachment: fixed; {% endif %}"></div>
        {% endif %}
      </div>
      {% endif %}
      <div class="featured-link-text-overlay" style="top: {{ section.settings.text_vertical3 }}%;">
        <div class="slider-text-alignment" style="text-align: {{ section.settings.text_horizontal3 }};">
          <h3 class="slider-title-size" style="padding: 0 5%; color: {{ section.settings.title_color3 }}; font-size: {{ section.settings.title_size3 }}px; font-weight: {{ section.settings.title_weight3 }};">
            {{ section.settings.title3 }}
          </h3>
          {% if section.settings.text3 != blank %}
          <div class="description" style="padding: 0 5%; color: {{ section.settings.description_color3 }}; font-weight: {{ section.settings.description_weight3 }};">{{ section.settings.text3 }}</div>
          {% endif %}
          {% if section.settings.button_label3 != blank %}
          <a {% if section.settings.button_link3 != blank %} href="{{ section.settings.button_link3 }}" {% endif %} class="action_button block_button">
            {{ section.settings.button_label3 }}
          </a>
          {% endif %}
        </div>
      </div>
    </div>
    {% endif %}
  </div>
</div>

Many thanks in advance for your help guys!

[GuilleMos]

Best solution I could find until now:

Add a script to show the container after the website is load and make sure the container has "display: none;" in the stylesheet.

$(window).load(function(){
  $('#back2').show();
  $('#back3').show();
  $('.featured-link-text-overlay').show(); 
});

The script will show the container after everything is load.

It maybe is not the best way but it works.

If someone knows a better way please share it!

[iamrohitsoni]

[Solved] Images are stacking vertically while slick slider is loading.

It worked for me with a little bit of jQuery and CSS.

jQuery:

$("body").bind("DOMNodeInserted", function() {
    var $this = $(this).find('.slick-initialized');
    window.setTimeout(function(){
        $this.addClass('finally-loaded');
    }, 2000);
});

CSS:

.slick-slider {
    opacity: 0;
    visibility: hidden;
    transition: opacity 1s ease;
    -webkit-transition: opacity 1s ease;
}

.slick-slider.finally-loaded {
    visibility: visible;
    opacity: 1;
    transition: opacity 1s ease;
    -webkit-transition: opacity 1s ease;
}

[webther]

This css works for me.

.my-slider-container {
  opacity: 0;
  visibility: hidden;
  transition: opacity 1s ease;
  -webkit-transition: opacity 1s ease;
}

.my-slider-container.slick-initialized {
  visibility: visible;
  opacity: 1;
}