I need help, the code does not work, what should I do?

Question

JavaScript

There is a code:

$(function(){

$('.header__slider').slick({
  infinite: true,
  fade: true,
  prevArrow: '<img class="slider-arrows slider-arrows-left" src="img/arrows-left.svg" alt="">',
  nextArrow: '<img class="slider-arrows slider-arrows-right" src="img/arrows-right.svg" alt="">',
  asNavFor: '.slides-dots',
});

$('.slider-dots').slick({
  slidesToShow: 4,
  slidesToScroll: 4,
  asNavFor: '.header__slider',
});

});

It throws this error:
Uncaught TypeError: Cannot read property 'slidesToShow' of undefined
at r.slideHandler (libs.min.js:1)
at r.changeSlide (libs.min.js:1)
at HTMLImageElement.i (jquery.min .js:2)
at HTMLImageElement.dispatch (jquery.min.js:2)
at HTMLImageElement.v.handle (jquery.min.js:2)

(Slider not working)

Answer 1

You have asNavFor: '.slides-dots' and the slider class is .slider-dots.

$(function(){

$('.header__slider').slick({
  infinite: true,
  fade: true,
  prevArrow: '<img class="slider-arrows slider-arrows-left" src="img/arrows-left.svg" alt="">',
  nextArrow: '<img class="slider-arrows slider-arrows-right" src="img/arrows-right.svg" alt="">',
  asNavFor: '.slider-dots',
});

$('.slider-dots').slick({
  slidesToShow: 4,
  slidesToScroll: 4,
  asNavFor: '.header__slider',
});

});