How to add slides to slider using ajax?

Question

JavaScript

Hello people. Tell me, there is a slider.

div id="carousel">
      <a href="#"><img src="images/1.jpg" id="item-1" /></a>
      <a href="#"><img src="images/2.jpg" id="item-2" /></a>
      <a href="#"><img src="images/3.jpg" id="item-3" /></a>
      <a href="#"><img src="images/4.jpg" id="item-4" /></a>
      
    </div>
    <a href="#" id="prev">Prev</a> | <a href="#" id="next">Next</a>

$(document).ready(function () {
        var carousel = $("#carousel").waterwheelCarousel({
          flankingItems: 3,
         
        });

        $('#prev').bind('click', function () {
          carousel.prev();
          return false
        });

        $('#next').bind('click', function () {
          carousel.next();
          return false;
        });

        $('#reload').bind('click', function () {
          newOptions = eval("(" + $('#newoptions').val() + ")");
          carousel.reload(newOptions);
      
          return false;
        });

      });

I'm trying to change the slides in it without reloading the page.
There are buttons on the site, I click, an ajax request is sent, new pictures are received (I look at the response in the console)

<div id="carousel">
      
      <a href="#"><img src="http://wp2/lp/wp-content/themes/Uzor-treyd/images/5.jpg" id="item-5" /><
/a>
      <a href="#"><img src="http://wp2/lp/wp-content/themes/Uzor-treyd/images/6.jpg" id="item-6" /><
/a>
      <a href="#"><img src="http://wp2/lp/wp-content/themes/Uzor-treyd/images/7.jpg" id="item-7" /><
/a>
      <a href="#"><img src="http://wp2/lp/wp-content/themes/Uzor-treyd/images/8.jpg" id="item-8" /><
/a>
      <a href="#"><img src="http://wp2/lp/wp-content/themes/Uzor-treyd/mages/9.jpg" id="item-9" /></a
>
    </div>
    <a href="#" id="prev">Prev</a> | <a href="#" id="next">Next</a>

But the slider doesn't work...
I made a test button (Run the carousel.reload(); function)
I click on it, nothing happens either.
Tell me what's wrong?
Here is the slider site

Answer 1

Look. When you get a response from the server, process it. Find all a.
In the example, I will store the result in the resp variable.

//обрабатываем результат запроса (Ищем в нем все теги a).
var newSlides = $(resp).find('a');
//удаляем прошлые теги а
$('#carousel a').remove();
//вставляем новые
$('#carousel').html(newSlides);

Something like this, if I understood the question (:

Answer 2

Remade request

//Запрашиваем по картинки для слайдера
    $.ajax({
      type: "POST",
      dataType: 'html',
      url : "/lp/wp-admin/admin-ajax.php",
      data: 'action=my_special&k_d_a_data=images&k_d_a_linkId='+linkId,
      cache: false,
      success: function (response) {
        var newSlides = $(response).find('a');
//удаляем прошлые теги а
$('#carousel3 a').remove();
//вставляем новые
$('#carousel3').html(newSlides);

      }
    });

The pictures are replaced, but together where the pictures of the slider were on the page, just a white screen, although in the code I look at the pictures, the new ones have taken the place of the old ones. Somehow you need to tell the slider - WORK!)
Tell me please.