Как добавить слайды в слайдер с помощью ajax?

Question

[Александр Новиков]

Привет народ.Подскажите, есть слайдер.

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

      });

Пытаюсь , изменять в нем слайды , без перезагрузки страницы.
Есть кнопки на сайте, нажимаю, отправляется запрос ajax , получает новые картинки (в консоле смотрю ответ)

<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>

Но слайдер не работает...
Сделал кнопку для теста (Запускать функцию carousel.reload(); )
Жму на нее , так же ни чего не происходит.
Подскажите в чем беда?
Вот сайт слайдера

Answer 1

[crazyhat]

Смотри. Когда получишь ответ с сервера обработай его. Найди все a.
В примере я результат буду хранить в переменной resp.

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

Как-то так, если я понял вопрос (:

Answer 2

[Александр Новиков]

Переделал запрос

//Запрашиваем по картинки для слайдера
		$.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);

			}
		});

Картинки подменяются, но вместе где были картинки слайдера на странице, просто белый экран, хотя в коде смотрю картинки новые встали на место старых. Как то нужно сказать слайдеру -РАБОТАЙ!)
Подскажите пожалуйста .