M
M
makboriska2022-03-25 17:15:41
AJAX
makboriska, 2022-03-25 17:15:41

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);
});


It works, but the launch of the slider does not work.

Here is the content output code

$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();
}


Please help, I don't know what to do...

Answer the question

In order to leave comments, you need to log in

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question