Несколько слайдеров на 1 странице с одинаковым class
Приветствую вас многоуважаемые.. Прошу вашей помощи, т.к. вообще не понимаю как сделать.. Проблема в том, что слайдеры (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
});
})
|
Что то не так, не работает ни на статичных, ни на созданных кликом по кнопке (Динамических)
Ошибку выдает Uncaught TypeError: f.slick is not a function |
А он вообще будет так прослушивать добавление нового кода слайдера? без документ ивент листенер и тд?
|
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
});
})
|
Цитата:
|
Так мне 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
});
})
}
})
|
Цитата:
|
Вот такой 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(); // удаляем кнопку
}
}
});
});
});
|
Цитата:
хотите мучатся, читайте про MutationObserver |
Цитата:
jQuery(function($) {
let num = 0;
// 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); // где вставить данные
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
});
});
this_page++; // увелич. номер страницы +1
if (this_page == _this.attr('data-max-pages')) {
_this.remove(); // удаляем кнопку, если последняя стр.
}
} else { // если закончились посты
_this.remove(); // удаляем кнопку
}
}
});
});
});
|
firsmember,
так лучше ...
jQuery(function($) {
let num = 0;
function addslider()
{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
});
});
}
addslider(); //установка слайдера при первой загрузке страницы
// 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); // где вставить данные
addslider();//!!!! //установка слайдера добавлении html
this_page++; // увелич. номер страницы +1
if (this_page == _this.attr('data-max-pages')) {
_this.remove(); // удаляем кнопку, если последняя стр.
}
} else { // если закончились посты
_this.remove(); // удаляем кнопку
}
}
});
});
});
|
Мне id нужно где то присвоить в html ? т.к. сейчас ошибку в консоли дает ((Uncaught TypeError: jQuery(...).slick is not a function) at addslider (myloadmore.js?ver=5.9.2:4))
|
Цитата:
|
Нет, не в этом дело, проверил
|
firsmember,
можно только гадать, другого алгоритма предложить не могу. |
| Часовой пояс GMT +3, время: 18:34. |