Making a slideshow work with Jquery Ajax calls

Question

I have to make a slideshow with Ajax calls (I already made it by changing the margin left but I now need to do it this way). I have a php array that I pulled from a db. I need to somehow use this to display the images. I'm sorry I can't go more in depth with this question, any guidance would be appreciated.

PHP/HTML

$pic_array = array();
$titles = array();
$descriptions = array();
while ($row = $result->fetch_assoc()) {
    $pic_array[$count] = $row['pic_url'];
    $titles[$count] = $row['title'];
    $descriptions[$count] = $row['description'];
    $count++;
}

echo "<input id='json_pics' type='hidden' value='" . json_encode($pic_array) . "'/>";
echo "<input id='titles' type='hidden' value='" . json_encode($titles) . "'/>";
echo "<input id='descriptions' type='hidden' value='" . json_encode($descriptions) . "'/>";
echo "<div id='slider'>
        <ul class='slides'>
            <li class='slide'>
                <div class='pic'>
                    <img src= " . $dir . $pic_array[$x] . " />
                </div>
                <div class='caption'>
                    <p id='title'>$titles[$x]</p>
                    <p id='des'>$descriptions[$x]</p>
                </div>
                <div class='next'>
                    <i class='fa fa-arrow-right fa-2x'></i>
                </div>    
                <div class='previous'>
                    <i class='fa fa-arrow-left fa-2x'></i>
                </div>
           </li>";
echo     "</ul>  
      </div>
   </html>";

$conn->close();

?>

Javascript

/**
 * Created by daneh_000 on 6/27/2016.
 */
$(function () {
    var arrPix = $('#json_pics').val();
    var arrPix = $.parseJSON( arrPix );

    var width = 450;
    var slide_number = 1;


    var $slider = $('#slider');
    var $slides = $slider.find('.slides');
    var $slide = $slides.find('.slide');
    var $next = $slides.find('.next');
    var $previous = $slides.find('.previous');
    var $caption = $slides.find('.caption');

    var slide_length = $slide.length;

    $slider.hover(function() {
            $caption.css('opacity', '1');
            $next.css('opacity', '1');
            $previous.css('opacity', '1');
        }, function() {
            $caption.css('opacity', '0');
            $next.css('opacity', '0');
            $previous.css('opacity', '0');
        }
    );
    $next.click(function() {
        var xhttp = new XMLHttpRequest();
        xhttp.onreadystatechange = function () {
            if (xhttp.readyState == 4 && xhttp.status == 200) {

            }
        }
        xhttp.open("POST", 'index.php', true);
        xhttp.send("index= slide_number");
    });
});

Answer 1

If you need just ajax slider: you don't need to write it by your self. You can take any popular slider, http://bxslider.com for example and hook slideChange (you can do this in each slider). For example:

$('ul.slides').bxSlider({
    pager: true,
    adaptiveHeight: true,
    infiniteLoop: true,
    onSlideBefore: function(slideElement, oldIndex, nextIndex) {
        $.get('/url/to/slide/' + nextIndex /*or slideElement.attr('slide-get-url') for example*/ , 
           function(response) {
            slideElement.html(response);
           }
        );

    }
});

If you want to write your own slider - first rule: it must be backend independent. Ajax request must to return inner content of one (or more) slide. Not outer. JS need just to set contents of existing slide (LI) or to create more slides if nessesary.