Displaying a title and description on a jquery slideshow

I have a preliminary jquery slideshow that I am trying to overlay a title and description on (starting with the title). The slideshow works by changing the margin-left by the width of the images. Right now all of the titles are on top of each other instead of one for each image. I'm planning on implementing next and previous buttons to this as well so instead of clicking the image I'll have next and previous functions.

EDIT: Okay apparently I wasn't clear on my question. All of the titles are stacked on top of each other right now, how do I get the titles to be on the correct images.

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 "<div id='slider'>
        <ul class='slides'>";
for ($x=0; $x < count($pic_array); $x++) {
    echo " <li class='slide'><img src= " . $dir . $pic_array[$x] . " /></li>";
    echo " <li class='title'>$titles[$x]</li>";
}
echo "   </ul>  
      </div>";

CSS

#slider {
    width: 450px;
    height: 250px;
    overflow:hidden;
    position:relative;
}
#slider .slides {
    display: block;
    width:10000px;
    height: 250px;
    margin:0;
    padding:0;

}
#slider .slide {

    float: left;
    list-style-type: none;
    width: 450px;
    height: 250px;
}
img {
    width: 450px;
    height: 250px;
}
.title {
    position:absolute;
    right:0;
    bottom:0px;
    padding: 1rem;
    left:0;
    color:white;
    background-color: rgba( 0, 0, 0, 0.25);
}

Javascript

$(function() {
    var width = 450;
    var slide_number = 0;

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

    $slider.click(function () {
        $slides.animate({'margin-left': '-=' + width}, 0, function () {
            slide_number++;
            if (slide_number == $slide.length ) {
                slide_number = 0;
                $slides.css('margin-left', 0);
            }
        });
    });

});