@makboriska

Как запустить swipper при ajax запросе?

Есть слайдер из заголовков записей по нажатию на title поста идет ajax запрос и выводит данные поста
Эти данные представлены в виде слайдера (Главная фотка + миниатюра).

Я использовал Swipper слайдер, при получения ответа на ajax запрос, контент появляется но слайдер не запускается. При чем без ajax загрузки слайдер работает, я попробовал запихнуть запуск слайдера в ajax но это не работает, также прописывал observe: true тоже не помогает, вот код:

function fetch(e){var param = $(e.target).attr('data-ajax-param');
  // Находим id поста по нажатию кнопки. У кнопки должен быть атрибут data-ajax-param равный id поста, например, data-ajax-param="11"
  $.post('https://dzenfood.by/wp-admin/admin-ajax.php', {'action':'my_action', 'param':param}, function(response){
  $('.modal-content.ajax').html(response);
    var swiperrr4 = new Swiper(".mySwiperrr4", {
      loop: false,
      spaceBetween: 10,
      freeMode: true,
      observer:true,
      observeParents:true,
      allowTouchMove: false,
      watchSlidesProgress: true,
    });
    var swiperrr3 = new Swiper(".mySwiperrr3", {
      loop: false,
      allowTouchMove: false,
      spaceBetween: 10,
      navigation: {
        nextEl: ".swiper-button-next3",
        prevEl: ".swiper-button-prev3",
      },
      thumbs: {
        swiper: swiperrr4,
      },
      observer:true,
      observeParents:true,
    });
});
}

  $( '[data-ajax-param]' ).click(function (e) {
  fetch(e);
});


Он работает, но не работает запуск слайдера

Вот сам код вывода контента

$recent = new WP_Query($args);

    while ( $recent->have_posts() ) : $recent->the_post();?>

        <div class="two-sliders two-sliders1 two-sliders1--active" id="tab-time1">
			<div class="swiper mySwiperr3">
				<div class="swiper-wrapper">
					<?php if( have_rows('new_eat_day') ): ?>
						<?php while( have_rows('new_eat_day') ): the_row();
							$img = get_sub_field('картинка_фото');
							?>
							<div class="swiper-slide" style="user-select: none;">
								<img src="<?php echo $img; ?>" alt="">
							</div>
						<?php endwhile; ?>
					<?php endif; ?>
				</div>
				<div class="swiper-button-next swiper-button-next3"></div>
				<div class="swiper-button-prev swiper-button-prev3"></div>

        </div>
			<div thumbsSlider="" class="swiper mySwiperr4">
				<div class="swiper-wrapper">
					<?php if( have_rows('new_eat_day') ): ?>
						<?php while( have_rows('new_eat_day') ): the_row();
							$img = get_sub_field('картинка_фото');
							$name = get_sub_field('name');
							$kall = get_sub_field('калл');
							$b = get_sub_field('белки');
							$sz = get_sub_field('жиры');
							$yg = get_sub_field('углеводы');
                            $number = get_sub_field('pp');
							?>
							<div class="swiper-slide">
								<img src="<?php echo  $img; ?>" alt="">
								<p class="swptext swptext<?= $number; ?>"><?php echo $name;?></p>
								<div class="bjy bjy<?= $number; ?>">
									<div class="bjy-item">
										<p><?php echo $kall; ?></p>
										<p>ккал</p>
									</div>
									<div class="bjy-item">
										<p><?php echo $b; ?></p>
										<p>белки</p>
									</div>
									<div class="bjy-item">
										<p><?php echo $sz; ?></p>
										<p>жиры</p>
									</div>
									<div class="bjy-item">
										<p><?php echo $yg; ?></p>
										<p>угл.</p>
									</div>
								</div>
							</div>
						<?php endwhile; ?>
					<?php endif; ?>
				</div>
			</div>
		</div>

    <?php endwhile; ?>
<?php
    die();
}


Помогите плиз, я уже не знаю что делать...
  • Вопрос задан
  • 78 просмотров
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы