Почему slick не воспринимает свои свойства reinit, unslick, destroy и т.д при подгрузке через ajax. Выдает ошибки, что такого свойства не существует?

Question

[vladzvezdin]

Это я пытаюсь воткнуть в шаблон АСПРО...это так к сведению. Slick работает корректно. Но при использовании свойств и методов из документации при ajax запросе, выдает ошибку

Comments

[Алексей Уколов]

Покажите код.

Причина на 146% в том, что вы после запроса пересоздаёте элемент и не навешиваете на него slick обратно.

[vladzvezdin]

Алексей Уколов,

$.ajax({
						url: arNextOptions['SITE_DIR'] + 'include/mainpage/comp_catalog_ajax.php',
						type: 'POST',
						data: {AJAX_POST: 'Y', AJAX_PARAMS: $(this).closest('.tab_slider_wrapp').find('.request-data').data('value'), GLOBAL_FILTER: curLi.data('filter')},
					}).success(function(html){

						curLi.find('.tabs_slider').html(html);
                        $(".hit-block .top_wrapper .catalog_block").slick('unslick');

                        $(".hit-block .top_wrapper .catalog_block").slick({
                            slidesToShow: 5,
                            slidesToScroll: 1,
                            dots: false,
                            responsive: [
                                {
                                    breakpoint: 1200,
                                    settings: {
                                        slidesToShow: 4
                                    }
                                },
                                {
                                    breakpoint: 992,
                                    settings: {
                                        slidesToShow: 3
                                    }
                                },
                                {
                                    breakpoint: 768,
                                    settings: {
                                        slidesToShow: 2
                                    }
                                },
                                {
                                    breakpoint: 576,
                                    settings: {
                                        slidesToShow: 1
                                    }
                                }
                            ]
						});
						setTimeout(function(){

							curLi.addClass('opacity1');
						}, 100);

						/*equal height*/
						curLi.find('.catalog_block .catalog_item_wrapp .catalog_item .item_info:visible .item-title').sliceHeight({item:'.catalog_item:visible', mobile: true});
						curLi.find('.catalog_block .catalog_item_wrapp .catalog_item .item_info:visible').sliceHeight({item:'.catalog_item:visible', mobile: true});
						curLi.find('.catalog_block .catalog_item_wrapp .catalog_item:visible').sliceHeight({classNull: '.footer_button', item:'.catalog_item:visible', mobile: true});

						initCountdown();
					})

[vladzvezdin]

Алексей Уколов, Разве не правильно делаю? при успешном аякс запросе, я деактивирую slick и снова инициализирую

[vladzvezdin]

Алексей Уколов, проблема в том, что консоль выдает ошибку на свойство unslick.

[Алексей Уколов]

Теперь не хватает только html разметки и точного текста ошибки.

[vladzvezdin]

Алексей Уколов, Cannot read property 'unslick' of undefined

[vladzvezdin]

Алексей Уколов, html тут не причем. Без slick'а все работает отлично.

[Алексей Уколов]

Ну, раз без кода, то успехов вам, хорошего настроения, держитесь там.

[vladzvezdin]

Алексей Уколов, Я скинул код)) Вы прикалываетесь что ли?) ну если slick работает, все четко. И без slick, аякс запрос работает нормально, потому что это стандартный шаблон АСПРО. Именно, когда нужно подгрузить контент со слайдером, выдает эту ошибку. Почему непонятно, ведь это свойство содержится в документации. Ну логично же, что это не в html

[vladzvezdin]

Алексей Уколов, Там html в перемешку с php. Много кода

[ProjectSoft]

vladzvezdin, вполне возможно, что слайдер ещё не инициализирован.
Куда копать
Как заставить slick-slider срабатывать при ресайзе страницы?

[vladzvezdin]

ProjectSoft, Он инициализирован. Это табы на странице. т.е при загрузке страницы отображается контент первого таба, и он отображается как надо, slick работает. При переключении на другой таб, его контент подгружается аяксом. Но по неведомым мне причинам, выводятся ошибки, так будто скриптовый файл самого плагина не подключен.

[ProjectSoft]

При переключении на другой таб, его контент подгружается аяксом

Он не инициализирован. Это явно. Т. к. пока он скрыт js не может просчитать его размеры для отображения.
Вот направление для борьбы с этим я и дал ссылку.
Всё тоже самое, только по клику на табах, и при ajax
Что-то подобное (не тестил, писал на коленке)

$(".hit-block .top_wrapper .catalog_block").on('init', function(slick){
	slick.data({'isSlick': 1});
}).on('destroy', function(e, slick){
	slick.data({'isSlick': 0});
});
function initSlick(element){
	$(element).slick({
		/* properties */
	});
}
/* Клик на любом табе */
/* Точно так же и для ajax */
$('.tab').on('click', function(e){
	$(".hit-block .top_wrapper .catalog_block").each(function(){
		var data = $(this).data();
		data.isSlick && $(this).slick('unslick');
		initSlick(this);
	});
});

[FeST1VaL]

vladzvezdin, как по мне тут нужен html чтобы понимать как у вас устроена иерархия так сказать... Нам не нужен код который в файле, а уже который на выходе без Slick... Схематично хотя бы.

Почему мне кажется что у вас несколько .catalog_block и по этому слайдер просто не понимает c какого снять и на какой элемент ему навесить Slick