slick.js中的错误："Uncaught TypeError: Cannot read property 'add' of null"

Question

我使用slick js来制作图像的滑动查看。

以下是我的代码。

<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>

现在用这段代码，我让幻灯片工作了，但是它没有正常显示，出现了错误：

Uncaught TypeError: Cannot read property 'add' of null

- Pooja Mokariya

---

当您尝试在同一元素上两次加载slick时，就会发生这种情况。在您的实现中似乎也发生了同样的事情。 - Venkat Ch

@VenkatCh 当我触发addslide函数时，它会在我的代码中添加多个幻灯片，我不知道为什么会这样。如果您知道，请帮助我解决这个问题。 - Pooja Mokariya

Answer 1

那是因为初始化两次导致的。以下代码可以正常工作：

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

另外，“silder”看起来像是一个打字错误。

仅依靠超时设置容易出错。不幸的是，Internet Explorer使用不同的事件告诉您何时HTML元素和JS库已加载。有许多库可以避免编写大约100行跨浏览器代码，但流行且相对较小的jQuery可以通过以下方式解决时序问题：

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

- Cees Timmerman

---

也对我有用。谢谢Cees!! - Eric Cicero

$(".slider").not('.slick-initialized').slick() 这段代码应该写在哪里？ - Manish Goswami

@ManishGoswami 在您的滑块HTML元素和slick库加载之后的任何位置。我已经添加了一个jQuery示例。 - Cees Timmerman

太棒了！非常感谢你！ - Nicolae Olariu

@CeesTimmerman 我应该在哪里编写这段代码？你的链接显示404 https://competa.com/blog/cross-browser-document-ready-with-vanilla-javascript/ - MageDev

在实施之前，我会调查为什么它被调用两次。如果您的代码中只有一个 $('.slider').slick() 实例，则可能是其他 JavaScript 也被调用了两次，这意味着某些原因导致其再次运行。 - nateM

Answer 2

在使用Slick和Rails 7 + Turbo时，我遇到了同样的问题。

$(".slider").not('.slick-initialized').slick()方法并没有帮助解决问题。

为了解决这个问题，我必须显式地解除已初始化的Slick轮播，就像这篇文章https://www.jpdevelopment.co.uk/blog/jquery-slick-carousel-turbolinks-initialisation中所示。

在我的情况下，代码如下：

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

- chumakoff

Answer 3

对我来说，我曾经遇到过类似的情况。当我使用slick内部页面构建器保存页面内容时，它就发生了。因此，

slick-initialized

类被添加到该元素中，我们再次尝试在js中调用它。这使我们调用两次并且无法正常工作。因此，如果您将其保存在HTML内容中，请在div中使用slick-initialized类或使用js进行调用。不要同时使用两者。

- Kvvaradha