Несколько слайдеров на 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(); // удаляем кнопку } } }); }); }); |
Часовой пояс GMT +3, время: 16:09. |