jQuery slider to load content one at a time

[RRPowered]

I have a slider that load all of my content at once. Into a div. Like so:

external page.php

$get_users = mysql_query("SELECT * FROM user WHERE id!='$user_id'"); 
while ($rows = mysql_fetch_assoc($get_users)) {
$id = $rows['id'];
$firstname = $rows['firstname'];

$display_info .= '
<div class="f_outer" id="' . $id . '">
    <div class="f_name likeu">' . $firstname . '</div>
</div>';
}
    echo $display_info;

I call this page from my find.php page using bxslider

Here is my find.php page below.

    <script type="text/javascript">
    $(function() {
    var slider = $("#slider1").bxSlider();
    $("#slider-like").live('click', function() {
        slider.goToNextSlide();
        return false;
    });
    }); 
    </script>

    <div id="slider-like>Yes</div>
    <div id="slider1">
    <?PHP
    include ("external.php");
    ?>
    </div>

So what I get is all of my .f_outer div on the find.php page. I have hundreds of user and they will all be loaded at once. I would like to only load one slide at a time. So when I click #slider-like it load one of my dive from my external page.

[pritaeas]

I have a demo on my website that uses two. One to show the current, and the other to preload the next. Take what you need. If you have questions, let me know here. You should make an improvement, since I am using a Javascript array. You should use AJAX to get the next, but am sure this will get you started.