bxSlider plugin combine with ajax call on each slide movement and change the src of images each time dynamically
<p>What I want to do is a slider of images that with each slide don't repeat themselves but get loaded from server via AJAX response. So on a button 'forward' or 'backward' being pressed I need to call via AJAX a MySQL function to change the offset of LIMIT command to search for forward results and on response of AJAX display the new images.</p>

<p>My primal code is this:</p>

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

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

<p>My guess would be on click of a forward or backward button to attach AJAX call and on response change the src of images:</p>

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

<p>But of course that would not work because I need to change the $row array from old result array to new - AJAX result. The way the plugin works is that it repeats images over and over while I need each time on slide button being pressed to change image src each of it - so to change $row array. Here I'm pretty much stuck. My main worry right now - what I don't get completely is how to pass the new src from results of AJAX call if the call returns an array.</p>

<p>My question is - how do I change the $row array from old MySQL results to the new AJAX results dynamically? Is there any way that can be done?</p>

<p>So far what I have achieved is:</p>

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

<p>This code on first click of the bnext button adds images but does not slide them. And on the next clicking it doesn't add the images.</p>