CODEWITHSUNDEEP
javascriptruby-on-railsangularjsslick.js
jacoballenwood
jacoballenwood

Reputation: 3057

Slick Carousel Error: null is not an object (evaluating 'b.$slides.add')

I'm using a slick carousel and got the previous error. I'm using an angular directive to set the element for the customizable carousel.

      .day-slider.ng-hide{"ng-show"=> "true", "carousel" => "", "center-mode" => "false", "slides-to-scroll" => "3", "autoplay" => "false", "initial-slide" => @presenter.day - 1, "rtl" => "#{is_rtl? ? 'true' : 'false'}", "dir" => "#{is_rtl? ? 'rtl' : 'ltr'}", "arrows" => "false"}

I saw in a post on github that someone's fix was to unslick() the element, before trying to slick() it.

I also saw it being related to using custom arrows, but I got the error even when turning the arrows off in the config. This same setup works on another page, which is what is rather confusing about the error.

Neither of these fixes worked for me, and other than that, I haven't seen this issue anywhere else.

Any help would be appreciated!

Upvotes: 1

Views: 3733

Answers (1)

jacoballenwood
jacoballenwood

Reputation: 3057

It turns out that the carousel was trying to be applied before the DOM was ready.

adding the $timeout function ended up resolving many slick errors, including the one for this question.

          controller: ["$element", "$scope", "$timeout", function($element, $scope, $timeout) {
            $timeout( function() {
               // your carousel code
            )};
          }]

Related to: Slick Carousel with Angular JS

Upvotes: 2

Related Questions