bxSlider插件与每个幻灯片移动的ajax调用相结合，并且每次动态更改图像的src

Question

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.

My primal code is this:

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

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

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

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.

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?

So far what I have achieved is:

   $('.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();
   });

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.

Answer 1

$row is a server-side php variable.

The click event handler is executed in the client (browser).

You would need some kind of protocol to communicate between the two, but that would be complicated.

I think your code is almost on the mark though. I've superficially checked the bxSlider documentation, and couldn't find anything on updating the slider content. So what's happening in your code, is that you're telling the bxSlider to use the first 4 slider elements you get from the database. Then on slider click you're adding new stuff to the html, but the slider never learns about them. So I would suggest the following:

$('.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
         });;
      }
    });

This way the bxSlider also knows to use the new img. Your slider will thus grow by 1 each time you click. If you want to keep the slider at 4, then you might remove the first child of the <div class="slider1"> . See this question for how to do that: How to delete the first child of an element but referenced by $(this) in Jquery?

It might be that bxSlider changes your html to the unrecognizable, but then you have a different problem, because your .append won't work in the first place.

Hope this helps.