Slick Slider некорректно отображается при ставке на движок WP, в чем проблема?

Question

[flare0n]

В общем в functions.php указаны следующие строки.

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);
	}

В самом index.php установлено так:

</footer>

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

В main.js следующие

настройки

$(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>'
				});
				
			});

Сам слайдер отображается вот так:

Ссылка на сайт, если требуется: flareon.mcdir.ru

*Должно получаться два слайдера, один "главный" и второй как синхронизированный.

Answer 1

[flare0n]

Проблема решена. Вся проблема лежала в стилях style.css
Для всех экранов было установлено

.feedback-slider_m {
  display: none; }

.product-slider_for_m {
  display: none; }

Убрал из основных и перетащил в media screen and (max-width: 575.98px). Слайдер заработал.

Answer 2

[Орхан Гасанлы]

1) Посмотрите в консоль браузера на наличие js ошибок.
2) у вас в main.js
$(document).ready(function(){.............
надо знаки доллара заменить на jQuery или как вариант

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

код здесь
});

Comments

[flare0n]

Ноль реакции. Заменил все знаки $ на jQuery

[Орхан Гасанлы]

flare0n, в консоли у вас есть ошибки связанные с slick.js

[flare0n]

azerphoenix, Я их уже видел. Исправление этих ошибок ни к чему не привело.

[flare0n]

Обнаружил проблему. Однако решения пока не нашел. Почему-то верхний слайдер перенимает свойства класса слайдера для экранов мобильных экранов. + Ставит на все картинки width: 0px