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

Miguel

It happens when you try to load slick twice on the same element. It seems same thing happening in your implementation. – Wharfage

@VenkatCh when i trigger addslide function it will add multiple slide in my code i dont know y this is happening. if you know please help me to come out from this. – Miguel

Answer 1

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.
})

Farwell

$(".slider").not('.slick-initialized').slick() where should is write this code ? – Pereyra

@ManishGoswami Any place after your slider HTML element and slick library have been loaded. I've added a jQuery example. – Farwell

@CeesTimmerman where should I write this code, your link display 404 competa.com/blog/… – Aidoneus

I'd investigate as to why exactly it's being called twice before implementing this. If you only have one instance of $('.slider').slick() in your code, then something is causing it to run again which means you may be calling other javascript twice as well. – Potsdam

Answer 2

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.

Kemper

Answer 3

I had the same issue when using Slick with Rails 7 + Turbo.

The $(".slider").not('.slick-initialized').slick() approach didn't help.

In order to solve the issue I had to explicitly unbind the initialized slick carousels as shown in this post https://www.jpdevelopment.co.uk/blog/jquery-slick-carousel-turbolinks-initialisation.

In my case the code was

$(document).on('turbo:before-cache', function() {
  const sliders = document.querySelectorAll('.slick-initialized');
 
  sliders.forEach(item => {
    $(item).slick('unslick');
  })
});

Lundberg