php data table - jquery sliding effect

[davids_media]

last week I was finally able to create a dynamic php table with data. now I want to expand on it;

 

here is the code;

 

<?php 
$title = "Pick your Product";

//Set number of columns to use
$maxCols = 3;

error_reporting(E_ALL ^ E_NOTICE);
ini_set("display_errors", 1);

require ('includes/config.inc.php');
include ('./includes/header.html');
require (MYSQL);
include ('./includes/main.html');

if($id = isset($_GET['catID'])) 
{
    //Create and run query to get product category names for the selected cat ID
    $query = "SELECT `product`.`prodID`, `product`.`product`, `category`.`cat`, `product`.`prod_descr`, `category`.`cat_descr`, `product`.`price`, `product`.`image`
              FROM `product`
              LEFT JOIN `category` ON `product`.`catID` = `category`.`catID`
              WHERE `product`.`catID`='{$_GET['catID']}'
              ORDER BY `product`.`product`";
    $r = mysqli_query($dbc, $query);

$showHeader = true;

echo "<div id='right'>";

    while($row = mysqli_fetch_array($r))
    {
        if($showHeader)
        {
		echo "<table>";
            //Display category header
            echo "<h1>" . "<span>" . "# " . "</span>" . $row['cat'] .  "<span>" . " #" . "</span>" . "</h1>";
		echo "<h2>" . $row['cat_descr'] . "</h2>";
            $showHeader = false;

		 //Set index var to track record count
        $recIdx = 0;

            $recIdx++;

            //Open new row if needed
            if($recIdx % $maxCols == 1)
            {
                echo "<tr>";
            }

        }

            //Display product	
            echo "<td>";
            echo "<img src='db/images/".$row['image']."' height=150px width=150px /><br>";
            echo "<li>" . "<a href='item.php?prodID={$row['prodID']}' title='{$row['product']}'>" . $row['product'] . "</a>" . "</li>";
            echo "<span>" . "£". $row['price'] . "</span>"; 




            echo "</td>";

            //Close row if needed
            if($recIdx % $maxCols == 1)
            {
                echo "</tr>";
            }
        }

        //Close last row if needed
        if($recIdx % $maxCols == 0)
        {
            echo "</tr>";
        }

        //Close table & div
    }

        echo "</table>";
        echo "</div>";

include ('./includes/footer.html');

?>

 

what I want is to apply a horizontal sliding effect for this table, so instead of paging for more results, just scroll across with next/previous buttons using jquery.

 

this is something I would really like to do but I am having real trouble with it at the moment. any help would be much appreciated.