Как добавить в слайдер картинки без перезагрузки страницы?

Question

[Dimas123]

Есть слайдер bootstrap carousel сайт на вордпрессе.

При загрузке страницы, с помощью php обращаюсь к базе и получаю массив с урлами картинок ($images).
Дальше прохожу по массиву и формирую html код слайдера bootstrap.

Но в базе данных добавляются ещё картинки. Слайдер об этом узнает, если перезагрузить страницу.
Как это сделать без перезагрузки страницы?

/* $images это массив с урлами картинок, результат запроса к базе данных  */
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel" data-pause="false" data-interval="5000">
  <!-- Wrapper for slides -->
  <div class="carousel-inner" role="listbox">
	<?php
	$i = 0;	
	foreach ( $images as $key => $image ) {		
		if($i==0) {
			$active = ' active';
		}else{
			$active = '';
		}
	?>
    <div class="item<?php echo $active; ?>">
      <img src="<?php echo $image['url']; ?>"  class="img-responsive center-block">
    </div>
	<?php
	$i++;
	}
	?>
  </div> 
</div>

Comments

[Kovalsky]

Насколько я понял, bootstrap carousel не умеет в live добавление слайдов. Так что, вероятно, единственный вариант это обновление всего блока слайдера.

[Dimas123]

Мне в целом не важно, я готов и поменять слайдер, если есть такой.

Answer 1

[Павел]

Сделать рядом кнопочку для обновления блока по Ajax?

$("#getSliderImages").click(function () {
    $("#carousel-example-generic").load();
});

Что то вроде того по идее

Comments

[Dimas123]

Сейчас у меня просто прописано в html обновление страницы http-equiv="refresh" content="420"

[diadiafiodor]

Можно и без кнопочки, сетинтервалом

Answer 2

[Денис А.]

setInterval + ajax. получаете новый список изображение, вставляете, релоад слайдера