Несколько слайдеров на 1 странице с одинаковым class

[firsmember]

Приветствую вас многоуважаемые.. Прошу вашей помощи, т.к. вообще не понимаю как сделать.. Проблема в том, что слайдеры (html код для них) у меня создаются динамически и нужен универсальный скрипт, который бы выполнялся и слайдеры начинали работать..

Код слайдера (они создаются динамически в любом количестве на ajax)

<div class="slider-prm-rab-box-block">
  
  <div class="slider-prim-rab-box-sim">

     <div class="slider slider-nav sliderthblock">
     

        <div class="slider-prim-rab-box-sim_img_min-block>
		<img src="/images/na22.jpg" class="slider-prim-rab-box-sim_img_min">
        </div>
     </div>
      

     <div class="slider slider-for slidershowblock">

        <div class="slider-prim-rab-box-sim_img-block">
	    <img src="/images/na22.jpg" class="slider-prim-rab-box-sim_img">
	</div>
     </div>
</div>

JS который запускает слайдер

jQuery('.slider-for').slick({
  slidesToShow: 1,
  slidesToScroll: 1,
  arrows: true,
  fade: true,
  asNavFor: '.slider-nav'
});

jQuery('.slider-nav').slick({
  slidesToShow: 4,
  slidesToScroll: 1,
  asNavFor: '.slider-for',
  vertical: true,
  verticalSwiping: true, 
  dots: false,
  focusOnSelect: true
});

Если слайдер 1 и создан просто в html все прекрасно работает, но нужно, что бы все созданные динамически слайдеры естественно не скопом а по отдельности инициализировались одним скриптом

[рони]

firsmember,

jQuery('.slider-prm-rab-box-block').each((i, el) => {
let f = jQuery('.slider-for', el).attr('id', `fff${i}`);
let n = jQuery('.slider-nav', el).attr('id', `nnn${i}`);
f.slick({
  slidesToShow: 1,
  slidesToScroll: 1,
  arrows: true,
  fade: true,
  asNavFor: `#nnn${i}`
});
n.slick({
  slidesToShow: 4,
  slidesToScroll: 1,
  asNavFor: `#fff${i}`,
  vertical: true,
  verticalSwiping: true,
  dots: false,
  focusOnSelect: true
});
})

[firsmember]

Что то не так, не работает ни на статичных, ни на созданных кликом по кнопке (Динамических)

Ошибку выдает Uncaught TypeError: f.slick is not a function

[firsmember]

А он вообще будет так прослушивать добавление нового кода слайдера? без документ ивент листенер и тд?

[рони]

firsmember,
а так?

jQuery('.slider-prm-rab-box-block').each((i, el) => {
jQuery('.slider-for', el).attr('id', `fff${i}`);
jQuery('.slider-nav', el).attr('id', `nnn${i}`);
jQuery('.slider-for', el).slick({
  slidesToShow: 1,
  slidesToScroll: 1,
  arrows: true,
  fade: true,
  asNavFor: `#nnn${i}`
});
jQuery('.slider-nav', el).slick({
  slidesToShow: 4,
  slidesToScroll: 1,
  asNavFor: `#fff${i}`,
  vertical: true,
  verticalSwiping: true,
  dots: false,
  focusOnSelect: true
});
})

[рони]

А он вообще будет так прослушивать добавление нового кода слайдера?

нет. что добавляет html, то и должно устанавливать плагин на новые элементы. учтите что id должно быть уникальным каждый раз.

[firsmember]

Так мне id нужно прописать?

[рони]

firsmember,
условная схема примерно такая ...

let num = 0;
jQuery.ajax({
complete : function(html) {
// ...add html
jQuery('.slider-prm-rab-box-block:not(.addslider)').each((i, el) => {
jQuery(el).addClass('addslider');
jQuery('.slider-for', el).attr('id', `fff${++num}`);
jQuery('.slider-nav', el).attr('id', `nnn${num}`);
jQuery('.slider-for', el).slick({
  slidesToShow: 1,
  slidesToScroll: 1,
  arrows: true,
  fade: true,
  asNavFor: `#nnn${num}`
});
jQuery('.slider-nav', el).slick({
  slidesToShow: 4,
  slidesToScroll: 1,
  asNavFor: `#fff${num}`,
  vertical: true,
  verticalSwiping: true,
  dots: false,
  focusOnSelect: true
});
})
}
})

[firsmember]

нет. что добавляет html, то и должно устанавливать плагин на новые элементы. учтите что id должно быть уникальным каждый раз.

Так в том то и дело, что мне нужно, прослушивать, и как только появится код, активировать на него slick slider

[firsmember]

Вот такой AJAX код у меня

jQuery(function($){

	// AJAX загрузка страниц/записей WP 
	$('.btn-loadmore').on('click', function(){
		let _this = $(this);
		_this.html('<span class="fas fa-redo fa-spin"></span> Загрузка...'); // изменение кнопки 

		let data = {
			'action': 'loadmore',
			'query': _this.attr('data-param-posts'),
			'page': this_page,
			'tpl': _this.attr('data-tpl')
		}

		$.ajax({
			url: '/wp-admin/admin-ajax.php',
			data: data,
			type: 'POST',
			success:function(data){
				if (data) {
					_this.html('<span class="fas fa-redo"></span> Загрузить ещё');
					_this.prev().parent().append(data); // где вставить данные 
					this_page++;                      // увелич. номер страницы +1 
					if (this_page == _this.attr('data-max-pages')) {
						_this.remove();               // удаляем кнопку, если последняя стр. 
					}
				} else {                              // если закончились посты 
					_this.remove();                   // удаляем кнопку 
				}
			}
	  });
  });

});