Slick.js Error: Cannot read properties of null (reading 'add')

0
votes

I am using Laravel 5.8 and Slick.js to show an Slideshow for my Online Store and I coded this:

Slick.prototype.initADA = function() {
        var _ = this,
                numDotGroups = Math.ceil(_.slideCount / _.options.slidesToShow),
                tabControlIndexes = _.getNavigableIndexes().filter(function(val) {
                    return (val >= 0) && (val < _.slideCount);
                });

        _.$slides.add(_.$slideTrack.find('.slick-cloned')).attr({
            'aria-hidden': 'true',
            'tabindex': '-1'
        }).find('a, input, button, select').attr({
            'tabindex': '-1'
        });

        if (_.$dots !== null) {
            _.$slides.not(_.$slideTrack.find('.slick-cloned')).each(function(i) {
                var slideControlIndex = tabControlIndexes.indexOf(i);

                $(this).attr({
                    'role': 'tabpanel',
                    'id': 'slick-slide' + _.instanceUid + i,
                    'tabindex': -1
                });

                if (slideControlIndex !== -1) {
                   var ariaButtonControl = 'slick-slide-control' + _.instanceUid + slideControlIndex
                   if ($('#' + ariaButtonControl).length) {
                     $(this).attr({
                         'aria-describedby': ariaButtonControl
                     });
                   }
                }
            });

            _.$dots.attr('role', 'tablist').find('li').each(function(i) {
                var mappedSlideIndex = tabControlIndexes[i];

                $(this).attr({
                    'role': 'presentation'
                });

                $(this).find('button').first().attr({
                    'role': 'tab',
                    'id': 'slick-slide-control' + _.instanceUid + i,
                    'aria-controls': 'slick-slide' + _.instanceUid + mappedSlideIndex,
                    'aria-label': (i + 1) + ' of ' + numDotGroups,
                    'aria-selected': null,
                    'tabindex': '-1'
                });

            }).eq(_.currentSlide).find('button').attr({
                'aria-selected': 'true',
                'tabindex': '0'
            }).end();
        }

        // for loop code goes here ...

        _.activateADA();

    };

Now the Slideshow does not show up correctly and showed me this errors at Console:

Uncaught TypeError: _.initADA is not a function
    at Slick.init 
    at new Slick 
    at jQuery.fn.init.$.fn.slick 
    at HTMLDocument.<anonymous> 
    at mightThrow 
    at process

And here is the result:

capture

However, it should be shown like this:

capture2

So what's going wrong here? How can I fix this issue?

And here is the html for that:

<div class="slider-slick-img container">
    <div class="slider-for slick-initialized slick-slider">
        <div class="slick-list draggable">
            <div class="slick-track" style="opacity: 1; width: 283px;">
                <div class="slick-slide slick-current slick-active" data-slick-index="0" aria-hidden="false" style="width: 283px; position: relative; right: 0px; top: 0px; z-index: 999; opacity: 1;">
                    <div>
                        @if(!empty($gallery))
                            @forelse($gallery as $path)
                                <div class="item" style="width: 100%; display: inline-block;">
                                    <img src="{{ \Illuminate\Support\Facades\Storage::url($path->upf_path) }}" alt="image"  draggable="false"/>
                                </div>
                            @empty
                            @endforelse
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="slider-nav mt-5 slick-initialized slick-slider">
        <div class="slick-list draggable" style="padding: 0px 50px;">
            <div class="slick-track" style="opacity: 1; width: 61px; transform: translate3d(-61px, 0px, 0px);">
                <div class="slick-slide slick-current slick-center" data-slick-index="0" aria-hidden="true" style="width: 61px;">
                    <div>
                        @if(count($gallery) > 1)
                            @if(!empty($gallery))
                                @forelse($gallery as $path)
                                    <div class="item px-2" style="width: 100%; display: inline-block;">
                                        <img src="{{ \Illuminate\Support\Facades\Storage::url($path->upf_path) }}" alt="image" draggable="false"/>
                                    </div>
                                @empty
                                @endforelse
                            @endif
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
javascriptjquerylaravelslickslick.js