Error in slick.js: "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.
})
Pooja Mokariya
A Computer Engineer Graduated from Nirma University. Currently working as a Software Developer on Ruby On Rails Technology. Having a strong passion and strength to work as a Software Developer with Ruby on Rails Technology. Result oriented, self-learner, eager to learn new technologies, methodologies, strategies and processes
Updated on February 17, 2022Comments
-
Pooja Mokariya over 2 years
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
-
Eric Cicero almost 6 yearsWorked for me also. Thank you Cees!!
-
Manish Goswami over 4 years$(".slider").not('.slick-initialized').slick() where should is write this code ?
-
Cees Timmerman over 4 years@ManishGoswami Any place after your slider HTML element and slick library have been loaded. I've added a jQuery example.
-
Nicolae Olariu over 4 yearsBrilliant! Thank you so much!
-
MageDev over 3 years@CeesTimmerman where should I write this code, your link display 404 competa.com/blog/…
-
nateM over 3 yearsI'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.