jQuery slider to load content one at a time

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.