Answer the question
In order to leave comments, you need to log in
How to run swipper on ajax request?
There is a slider from the titles of the posts by clicking on the title of the post, an ajax request is made and the data of the post
is displayed. This data is presented as a slider (Main photo + thumbnail).
I used Swipper slider, when getting response to ajax request, the content appears but the slider doesn't start. Moreover, the slider works without ajax loading, I tried to shove the launch of the slider into ajax, but it doesn’t work, I also wrote observe: true doesn’t help either, here’s the code:
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();
}
Answer the question
In order to leave comments, you need to log in
Didn't find what you were looking for?
Ask your questionAsk a Question
731 491 924 answers to any question