How to make a slider div?

Question

I have a dynamically generated DIV

<div class="content drag-desired">
<?php
  $result = mysql_query("SELECT * FROM XXXX WHERE qty != 0");
while($row=mysql_fetch_assoc($result))
{
echo '<div class="product"><img src="img/products/'.$row['img'].'" alt="'.htmlspecialchars($row['name']).'" width="128" height="128" class="pngfix" />
<div>'.$row['price'].'$</div></div>';
}
 ?>
 <div class="clear"></div>
 </div>

the while loop makes the list be very long,

Any idea how to make the div contains 6 items only and show the fetched items 6 by 6?

I don't know the logic behind the scene. :)

I will be appreciated, if someone explain the follow chart for making the div slides.

Thanks

I don't understand the "making the div slides" question, but you can `LIMIT` your SQL to just return 6 rows, if that's what you're looking for (e.g., `SELECT * FROM XXXX WHERE qty != 0 LIMIT 6`). — jterry, Jun 18 '13 at 14:02
You have a hard coded select query in there. You might be able to limit your results with it. — kleinfreund, Jun 18 '13 at 14:02
try pagination concept and this guide you some extent http://stackoverflow.com/questions/3705318/simple-php-pagination — Mahesh.D, Jun 18 '13 at 14:02
Check out MySQL LIMIT command, using offsets to where to start the query. http://dev.mysql.com/doc/refman/5.0/en/select.html — jtheman, Jun 18 '13 at 14:08

score 1 · Answer 1 · answered Jun 18 '13 at 14:09

Like so:

<div class="content drag-desired">
<?php
  $result = mysql_query("SELECT * FROM XXXX WHERE qty != 0");
  $counter = 0;
  while($row=mysql_fetch_assoc($result))
  {
  if($counter==0)
    echo '<div class="slide">';

    echo '<div class="product"><img src="img/products/'.$row['img'].'" alt="'.htmlspecialchars($row['name']).'" width="128" height="128" class="pngfix" />
    <div>'.$row['price'].'$</div></div>';

  if($counter==5)
    echo '<div>';

  $counter++;
  if($counter > 5)
    $counter = 0;
  }
  ?>
  <div class="clear"></div>
  </div>

So, the code below counts to 6 and wraps 6 items inside "slide". I think you understand the logic I used :) And with a little hint of CSS/JavaScript you can make your own slider that changes slide to be shown.

How to make a slider div?

1 Answers1