Slideshow isnt appearing on desktop and mobile too

[amina123456]

 

when i load ,refresh or save the website the slide show never appears why it isnt working why?

here is my code 

  {% if section.blocks.size > 0 %}

    <div class="home-slideshow">

      <div class="variable-width owl-carousel owl-theme" data-slick='{

      dots: true,

      slidesToScroll: 1,

      autoplay:true,

      fade: {{ section.settings.slideshow_transition }},

      autoplaySpeed:{{ section.settings.slideshow_speed }}

  }'>

        {% for block in section.blocks %}

          <div class="slick-list slideshow__slide--{{ block.id }}">                

              {% if block.type == 'image' %}

            {% if block.settings.image != blank %}

            <a href="{{ block.settings.link }}" >

              {%- assign img_url = block.settings.image | img_url: '2000x' -%}

              <img src="{{ img_url }}" data-url="{{ block.settings.link }}" class="slide-img " alt="{{ block.settings.image.alt }}" />

            </a>

             {% else %}

               {% capture current %}{% cycle 1, 2 %}{% endcapture %}

                  {{ 'lifestyle-' | append: current | placeholder_svg_tag: 'placeholder-svg' }}

            {% endif %}

            {% endif %}

            {% if block.settings.title != blank or block.settings.subheading != blank %}         

              <div class="slider-content" 

                   style="

                          {% if block.settings.alignment == 'left' %}

                           left:10%;

                           right: initial!important;

                           {% endif %}

                          {% if block.settings.alignment == 'right' %}

                           right:10%;

                           left: initial!important;text-align:right;

                           {% endif %}

                          ">

                <h2 class="slide-heading animated "

                    style="{% if block.settings.heading_size != blank %}

                           font-size: {{ block.settings.heading_size }}px;

                           {% endif %}

                           {% if block.settings.heading_color != blank %}

                           color:{{ block.settings.heading_color }};

                           {% endif %}">

                  {{ block.settings.title  }}

                </h2>

                <div class="slide-text animated" {% if block.settings.alignment == 'right' %} style="text-align:right;float:right;"{% endif %}>

                <p 

                   style="{% if block.settings.subheading_size != blank %}

                           font-size: {{ block.settings.subheading_size }}px;float:left;

                           {% endif %}

                           {% if block.settings.subheading_color != blank %}

                           color:{{ block.settings.subheading_color }};

                           {% endif %}

                          {% if block.settings.alignment == 'right' %}

                          float:right;

                          {% endif %}

                          ">

                  {{  block.settings.subheading }}

                </p>

                </div>

                <h2 class="slide-heading animated "

                    style="{% if block.settings.heading_size != blank %}

                           font-size: {{ block.settings.heading_size }}px;

                           {% endif %}

                           {% if block.settings.heading_color != blank %}

                           color:{{ block.settings.heading_color }};float:left;width:100%;

                           {% endif %}">

                  {{ block.settings.title_1  }}

                </h2>

                <div class="slide-button" style="float:left;width:100%;">

                <a href="{{ block.settings.link }}" class="animated btn ">

                  {{  block.settings.button }}

          </a>

                </div>

              </div>

            {% endif %}

          </div>

        {% endfor %}

      </div>

    </div>

  {% endif %}

<script>

var prodVideoId= $('iframe').data('video-id');

  $(document).on('ready', function() {

  $('.variable-width').fitVids().slick({

    dots: true,

    slidesToScroll: 1,

    autoplay:true,

    fade: {{ section.settings.slideshow_transition }},

    autoplaySpeed:{{ section.settings.slideshow_speed }},

    afterChange: function(slick, currentSlide){

    console.log(currentSlide);

  }

});   

  })

</script>

{% schema %}

  {

    "name": "Slideshow",

    "class": "index-section index-section--flush",

    "max_blocks": 10,

    "settings": [

      {

        "type": "select",

        "id": "slideshow_speed",

        "label": "Change slides every",

        "options": [

          { "value": "1000", "label": "1 seconds" },

          { "value": "2000", "label": "2 seconds" },

          { "value": "3000", "label": "3 seconds" },

          { "value": "4000", "label": "4 seconds" },

          { "value": "5000", "label": "5 seconds" },

          { "value": "6000", "label": "6 seconds" },

          { "value": "7000", "label": "7 seconds" },

          { "value": "8000", "label": "8 seconds" },

          { "value": "9000", "label": "9 seconds" },

          { "value": "10000", "label": "10 seconds" }

        ],

        "default": "5000"

      },

      {

        "type": "select",

        "id": "slideshow_transition",

        "label": "Slideshow transition effect",

        "options": [

          {

            "value": "false",

            "label": "Slide"

          },

          {

            "value": "true",

            "label": "Fade"

          }

        ],

        "default": "true"

      },

  {

            "type": "color",

            "id": "navigation_color",

            "label": "Navigation color",

            "default": "#fff",

        "info": "Default Value: #fff"

       },

  {

        "type": "paragraph",

        "content": "IMPORTANT: For best results, Upload image : 1880px x 720px recommended. Try to keep your slideshow images the same size."

      }

    ],

    "blocks": [

      {

        "type": "image",

        "name": "Image slide",

        "settings": [

          {

            "type": "image_picker",

            "id": "image",

            "label": "Image"

          },

          {

            "type": "select",

            "id": "alignment",

            "label": "Text alignment",

            "default": "center",

            "options": [

              {

                "value": "left",

                "label": "Left"

              },

              {

                "value": "center",

                "label": "Center"

              },

              {

                "value": "right",

                "label": "Right"

              }

            ]

          },

          {

            "type": "text",

            "id": "title",

            "label": "Heading"

          },

  {

            "type": "color",

            "id": "heading_color",

            "label": "Heading Color",

            "default": "#000",

        "info": "Default Value: #000"

          },

  {

            "type": "text",

            "id": "heading_size",

            "label": "Heading Font Size",

            "default": "40",

        "info": "Default Value: 40"

          },

          {

            "type": "text",

            "id": "subheading",

            "label": "Subheading"

},

  {

            "type": "color",

            "id": "subheading_color",

            "label": "SubHeading Color",

            "default": "#000",

        "info": "Default Value: #000"

          },

          {

            "type": "text",

            "id": "subheading_size",

            "label": "SubHeading Font Size",

            "default": "12",

        "info": "Default Value: 12"

          },

{

            "type": "text",

            "id": "title_1",

            "label": "Heading"

          },

          {

            "type": "text",

            "id": "button",

            "label": "Slide Button"

          },

          {

            "type": "url",

            "id": "link",

            "label": "Slide link"

          }

        ]

      }

    ],

    "presets": [{

      "name": "Slideshow",

      "category": "Slideshow",

      "settings": {

        "slideshow_speed": "5000",

"slideshow_transition": "false"

      },

      "blocks": [

        {

          "type": "image"

        }

      ]

    }]

  }

{% endschema %}

<style>

  .slide-text p { margin:0; }

 .home-slideshow  .slick-arrow:before{ color: {{ section.settings.navigation_color }}; }

  .fluid-width-video-wrapper{padding-top:{{ section.settings.video_height }}!important;}

</style>

{% javascript %}

function process_slick_event(evt) {

  var _slick = $( "#" +evt.target.id + " .home-slideshow .variable-width");

  if( _slick.length )

  {

    switch ( evt.originalEvent.type ) {

      case "shopify:section:load" : 

        console.log('Load ' + _slick.attr("id"));

        _slick.slick (

            {

              dots: true,

      slidesToScroll: 1,

              autoplay: _slick.data('slick').autoplay,

              autoplaySpeed: _slick.data('slick').autoplaySpeed

            }

          );

      break; 

      case "shopify:section:unload" :

        console.log('Unload ' + _slick.attr("id"));

        _slick.slick('unslick');

      break;

     } 

  }

}

$(document)

 .on( 'shopify:section:load', process_slick_event )

 .on( 'shopify:section:unload', process_slick_event )

;

{% endjavascript %}