Error in slick.js: "Uncaught TypeError: Cannot read property 'add' of null"

I used slick js for slider view of image.

Here is my code.

<div class="slider_wrap add-remove">
    <%= f.fields_for :images do |image_form| %>
      <%#= render 'images_fields', :f => image_form %>
        <div>
          <%= image_tag image_form.object.picture.url,:class=>"drop_down_link even img_prev" %>
        </div>
        <div class="image_upload_div">
          <div class="image-upload">
            <label>
              <i class="fa fa-cloud-upload">
                <%= image_form.file_field :picture ,:'data-role'=>"none",:onchange=>"readURL(this);" , :accept => 'image/jpeg , image/png' %>
              </i>
            </label>
          </div>
        </div>
    <% end %>
    <%= f.link_to_add "Add a picture", :images ,:id=>"add_pic" ,:class=>"js-add-slide", :style=>"display: none;"%>
</div>

<script>
function silder(){
    slideIndex = 0;
      $('.add-remove').slick({
        slidesToShow: 2,
        slidesToScroll: 2
      });
      $('.js-add-slide').on('click', function() {
        $('.add-remove').slick('slickAdd');
      });

      $('.js-remove-slide').on('click', function() {
        $('.add-remove').slick('slickRemove');
      });
});
function readURL(input) {
  if (input.files && input.files[0]) {
    var reader = new FileReader();
    reader.onload = function (e) {
    $('.img_prev').last()
      .attr('src', e.target.result)
    };

    reader.readAsDataURL(input.files[0]);

    setTimeout(function(){
      $('#add_pic').trigger('click');
      silder();
    }, 100);
  }
}
</script>

Now with this code I got slider working, but its not coming proper I am getting error:

> Uncaught TypeError: Cannot read property 'add' of null

That's due to calling init twice. This works without error:

$(".slider").not('.slick-initialized').slick()

Also, "silder" looks like a typo.

Relying on a timeout is also error-prone. Unfortunately, Internet Explorer uses a different event to tell you when the HTML elements and JS libraries have been loaded. There are many libraries to avoid the 100 or so lines of cross-browser code, but the popular and relatively small jQuery solves the timing issue like this:

$(function() {
  // Handler for .ready() called. Put the Slick Slider etc. init code here.
})

For me I had the similar situation. And it happened to me, when I was using the slick inside pagebuilder to save the page content. So the

> slick-initialized

class was added with that element and we are trying to call in js again. and which made us called twice and fails to work for us. So if you are saving it inside HTML content. Either user slick-initialized class in the div or use js to call. Don't use both together.