how to make image slider into while loop

Question

I have a website retrieving images from database. The database has multiple records (ROWS). I am using while loop to retrieve the records. Every record having three or four images. I want to use a horizontal image slider into the while loop to retrieve all the records. I searched in the net. there are lot of slider. But nothing was in the loop. if I put them into the loop it was not working. please help me some one.

example slider: http://wowslider.com/automatic-jquery-slider-noir-squares-demo.html?affid=331J-S9

for example:

<?php
While($row=mysql_fetch_array($result)){

          **I need horizontal slider here**;
          }
?>

Answer 1

I (obviously) won't write you you the whole widget but I'm wailing to give you all you need:

First, you need PHP. I suggest you to learn PDO. It's very easy to use and pretty safe:

Example:

  <?php
     try {
       $dbh = new PDO('mysql:host=localhost;dbname=test', $user, $pass);
       foreach($dbh->query('SELECT * from FOO') as $row) {
          print_r($row);
       }
      $dbh = null;
      } catch (PDOException $e) {
        print "Error!: " . $e->getMessage() . "<br/>";
       die();
      }
   ?>

PDO documentation

Then, use HTML and CSS to style the thing.

Then, you use PHP to generate the HTML.

Then, you will use an javascript setInterval

Example for setInterval

setInterval(function() {
  // Do something every 5 seconds
}, 5000);

If you need a different ID for each, the easiest way would be to do this:

   $counter = 0;
   foreach($foo as $bar){
     echo '<div id="slider'.$counter.'"></div>';
     //somecode
     $counter++;
   }

Tho, I do not recommand using this, you should just give one class to each of them and initiate them all at the same time in jQuery using the selector after

    $('.slider').myPlugin({
      //Plugins options
    })

Answer 2

as per my understanding, it seems you're looking for this kind of solution. Use of js "jquery.bxslider.js", required css "jquery.bxslider.css"

//assuming this is your database retrieval
$slideImage[]   = "clody.jpg";
$slideImage[]   = "heaven.jpg";
$slideImage[]   = "park.jpg";
$slideImage[]   = "pool.jpg";
$slideImage[]   = "provence.jpg";

$slideStr       = "";
//utlize while loop if required
foreach($slideImage as $indKey=>$indSlideImg) {
    $slideStr .= '<div class="slide"><img src="http://wowslider.com/sliders/demo-5/data/tooltips/'.$indSlideImg.'" /></div>';
}

here in the above loop we created a sliding string, which we are going to utilize that into our slider.

<div class="bx-wrapper">
    <div class="bx-viewport">
        <div class="slider1">
            <?php echo $slideStr; ?>
        </div>
    </div>
</div>

here comes the javascript

$(document).ready(function(){
  $('.slider1').bxSlider({
    slideWidth: 200,
    minSlides: 2,
    maxSlides: 3,
    slideMargin: 10
  });
});

hope it is helpful.