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

Question

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

Answer 1

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.