Плагин bxSlider объединяется с ajax-вызовом при каждом перемещении слайдов и каждый раз изменяет src изображений.

Question

Что я хочу сделать, это слайдер изображений, который с каждым слайдом не повторяется, а загружается с сервера с помощью ответа AJAX. Таким образом, нажатие кнопки «вперед» или «назад» мне нужно вызвать через AJAX функцию MySQL, чтобы изменить смещение команды LIMIT для поиска результатов вперед и при ответе AJAX отобразить новые изображения.

Мой первоначальный код заключается в следующем:

<script src="script/jquery.bxslider.js" type="text/javascript"></script> 
<script type="text/javascript"> 
$(document).ready(function(){ 
$('.slider1').bxSlider({ 
slideWidth: 200, 
minSlides: 2, 
maxSlides: 3, 
slideMargin: 10 
}); 
}) 
</script> 

<div class="slider1"> 
      <?php 
      $query = "SELECT * FROM vid LIMIT 4"; 
      $result = mysqli_query($conn,$query); 
      if(!$result){echo 'error with query';} 
      while ($row = mysqli_fetch_assoc($result)) { ?> 
       <div class="slide"> 
       <img class='img_res'src='<?php $src = "images/"; echo $src.$row['namev_id'].".png";?>' alt="Bacn"> 
       </div> 
      <?php } ?>     
     </div> 

Мое предположение было бы по нажатию кнопки вперед или назад, чтобы прикрепить AJAX вызова и на ответ изменить СРК изображения:

$('.forward_btn').click(function(){ 
    $.ajax({url: "load_results.php", success: function(result){ 
     $("#slider1").append("<div><img src='result'></div>"); 
}}); 

Но конечно, это не сработает, потому что мне нужно изменить массив $ row из старого массива результатов в новый - результат AJAX. Способ, которым работает плагин, заключается в том, что он повторяет изображения снова и снова, когда мне нужно каждый раз при нажатии на кнопку слайда для изменения каждого изображения src, поэтому для изменения массива $ row. Здесь я почти застрял. Мое основное беспокойство прямо сейчас - то, что я не получаю полностью, - это как передать новый src из результатов вызова AJAX, если вызов возвращает массив.

Мой вопрос: как изменить динамический массив $ row из старых результатов MySQL в новые результаты AJAX? Есть ли способ сделать это?

До сих пор, что я достиг является:

$('.bx-next').click(function(e){ 
    e.preventDefault(); 
    $('.slider1').append('<div class="slide"><img src="images/57d54a2e53324.png"></div>'); 
    $('.slider1').append('<div class="slide"><img src="images/57d54a2e53324.png"></div>'); 
    $('.slider1').append('<div class="slide"><img src="images/57d54a2e53324.png"></div>'); 
    $('.slider1').append('<div class="slide"><img src="images/57d54a2e53324.png"> </div>'); 
    slider.reloadSlider(); 
    }); 

Этот код на первый щелчок кнопки bnext добавляет изображения, но не сдвигайте их. И при следующем нажатии он не добавляет изображения.

Answer 1

$row - это переменная php на стороне сервера.

Обработчик события click выполнен в клиенте (браузере).

Вам понадобится какой-то протокол для связи между ними, но это будет сложно.

Я думаю, что ваш код почти на отметке. Я поверхностно проверил документацию bxSlider и ничего не смог найти при обновлении содержимого слайдера. Итак, что происходит в вашем коде, заключается в том, что вы говорите, что bxSlider использует первые 4 элемента слайдера, которые вы получаете из базы данных. Затем на слайдере вы добавляете новый материал в html, но ползунок никогда не узнает о них. Поэтому я хотел бы предложить следующее:

$('.forward_btn').click(function(){ 
    $.ajax({url: "load_results.php", success: function(result){ 
     $("#slider1") 
     .append("<div><img src='result'></div>") 
     .bxSlider({ 
      slideWidth: 200, 
      minSlides: 2, 
      maxSlides: 3, 
      slideMargin: 10 
     });; 
     } 
    }); 

Таким образом bxSlider также знает, чтобы использовать новый IMG. Таким образом, ваш слайдер будет расти на 1 каждый раз, когда вы нажмете. Если вы хотите, чтобы ползунок был равен 4, вы можете удалить первый ребенок из <div class="slider1">. Смотрите этот вопрос о том, как сделать это: How to delete the first child of an element but referenced by $(this) in Jquery?

Это может быть, что bxSlider меняет ваш HTML к неузнаваемым, но тогда у вас есть другая проблема, потому что ваш .append не будет работать в первую очередь.

Надеюсь, это поможет.