Slick Slider not displaying correctly when betting on WP engine, what's the problem?

Question

JavaScript

In general, functions.php contains the following lines.

funtions.php

<?php 
  add_action( 'wp_enqueue_scripts', 'theme_name_scripts' );
  function theme_name_scripts() {
    wp_enqueue_style( 'style', get_stylesheet_uri() );
    wp_enqueue_style( 'bootstrap', get_template_directory_uri() . '/css/bootstrap-grid.min.css' );
    wp_enqueue_style( 'animate', get_template_directory_uri() . '/css/animate.css' );
    wp_enqueue_style( 'slick', get_template_directory_uri() . '/slick/slick.css' );
    wp_enqueue_style( 'slick-theme', get_template_directory_uri() . '/slick/slick-theme.css' );
    wp_enqueue_style( 'main', get_template_directory_uri() . '/css/style.css' );
  }
  add_action( 'wp_enqueue_scripts', 'theme_scripts' );
  function theme_scripts() {
    wp_deregister_script( 'jquery' );
    wp_register_script( 'jquery', 'https://code.jquery.com/jquery-3.3.1.slim.min.js');
    wp_enqueue_script( 'jquery' );
    wp_enqueue_script( 'slick', get_template_directory_uri() . '/slick/slick.min.js', array('jquery'), null,true);
    wp_enqueue_script( 'wow', get_template_directory_uri() . '/js/wow.min.js', array('jquery'), null,true);
    wp_enqueue_script( 'main', get_template_directory_uri() . '/js/main.js', array('jquery'), null,true);
  }

In index.php itself it is set like this:

</footer>

      <?php wp_footer(); ?>
  </body>

In main.js are the following

settings

$(document).ready(function(){

          $('.header-contacts__btn').on("click", function(){
            $('.overlay').show()
          });

          $('.window-close').on("click", function(){
            $('.overlay').hide()
          });

          var link = $('.menu-link');
          var menu = $('.menu');

          link.click(function(){
            menu.toggleClass('menu_active')
            link.toggleClass('menu-link_active')
          })

          jQuery("form").keypress(function(e) {
            if (e.which != 8 && e.which != 0 && e.which != 46 && (e.which < 48 || e.which > 57)) {
            return false;
            }
          });

          $(window).on('scroll', function() {
        var $div = $('.menu-link'),
       scroll = $(this).scrollTop();

        if (scroll > 10) {
       $div.addClass('menu-link_active');
        } else {
       $div.removeClass('menu-link_active');
        }
          });
        new WOW().init();
        $('.product-slider_for').slick({
          slidesToShow: 1,
        slidesToScroll: 1,
        arrows: false,
        asNavFor: '.product-slider_nav',
        responsive: [
     	{
     		breakpoint: 576,
     		settings: "unslick"
     	}
     ]
       });
        $('.product-slider_nav').slick({
          slidesToShow: 4,
        slidesToScroll: 1,
        arrows: true,
        focusOnSelect: true,
  			autoplay: false,
        prevArrow: '<div class="slider-arrow slider-arrow_left"></div>',
        nextArrow: '<div class="slider-arrow slider-arrow_right"></div>',
        asNavFor: '.product-slider_for',
        responsive: [
     	{
     		breakpoint: 1200,
     		settings: {
     			slidesToShow: 3,
     			slidesToScroll: 1,
     			arrows: true,
     			focusOnSelect: true,
     			dots: true
     		}
     	},
     	{
     		breakpoint: 576,
     		settings: "unslick"
     	}
     ]
        });
        $('.feedback-slider').slick({
          slidesToShow: 3,
        slidesToScroll: 1,
          arrow: true,
        prevArrow: '<div class="slider-arrow slider-arrow_left slider-arrow_left-o slider-arrow_left_m"></div>',
        nextArrow: '<div class="slider-arrow slider-arrow_right slider-arrow_right-o slider-arrow_right_m"></div>',
        responsive: [
     	{
     		breakpoint: 992,
     		settings: {
     			slidesToShow: 2,
     			slidesToScroll: 1,
     			arrows: true,
     			focusOnSelect: true,
     			dots: true
     		}
     	},
     	{
     		breakpoint: 768,
     		settings: {
     			slidesToShow: 1,
     			slidesToScroll: 1,
     			arrows: true,
     			dots: true
     		}
     	},
     	{
     		breakpoint: 576,
     		settings: "unslick"
     	}
     ]
        });
        $('.product-slider_for_m').slick({
          slidesToShow: 1,
        slidesToScroll: 1,
        arrows: true,
        prevArrow: '<div class="slider-arrow slider-arrow_left slider-arrow_left_m"></div>',
        nextArrow: '<div class="slider-arrow slider-arrow_right slider-arrow_right_m"></div>'
       });
       $('.feedback-slider_m').slick({
          slidesToShow: 1,
        slidesToScroll: 1,
          arrow: true,
        prevArrow: '<div class="slider-arrow slider-arrow_left slider-arrow_left_m"></div>',
        nextArrow: '<div class="slider-arrow slider-arrow_right slider-arrow_right_m"></div>'
        });
        
      });

The slider itself is displayed like this:

Link to the site, if required: flareon.mcdir.ru

*You should get two sliders, one "main" and the second as synchronized.

Answer 1

Problem solved. The whole problem lay in the styles style.css
For all screens it was set

.feedback-slider_m {
  display: none; }

.product-slider_for_m {
  display: none; }

Removed from main and dragged to media screen and (max-width: 575.98px). The slider worked.

Answer 2

1) Look in the browser console for js errors.
2) you
need to replace the dollar signs in main.js with jQuery or as an option

jQuery(document).ready(function($) {

код здесь
});