Carrousel in php and mysql

5

I have a "file upload" and needed to show it in a carousel. The path of the images is stored in the database and the images in a folder, of course. I have the following code:

<div id="myCarousel" class="carousel slide" data-ride="carousel">
  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
    <li data-target="#myCarousel" data-slide-to="1"></li>
    <li data-target="#myCarousel" data-slide-to="2"></li>
    <li data-target="#myCarousel" data-slide-to="3"></li>
  </ol>

  <!-- Wrapper for slides -->
  <div class="carousel-inner" role="listbox">

  <?php
  $con = mysqli_connect("localhost","root","","saber");
  mysqli_set_charset($con,"utf-8");
  $result = mysqli_query($con,"select * from banners");
  while($row = mysqli_fetch_array($result)){
    $img = $row['imagem'];
    echo "<div class='item active'>
      <img src='php/$img'>
    </div>";
    }
    ?>
  </div>

  <!-- Left and right controls -->
  <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

And when I go to test the images appear one below the others. And I can not see what the error is!

I got the code for the carusel here and the carousel should be as shown in the example link I mentioned above, but it looks like this:

IreallyneedtohavethisreadytodayandsinceI'veneverworkedwithcarouselinphpanddatabase.SoI'llputthe whole page code .

And at Ricardo's request here is html rendering

PS: I did not do this so I may not be able to answer all the questions you have.

    
asked by anonymous 13.07.2015 / 17:49

5 answers

1

Well, this answer is for those who want to make a merry-go-round but do not know how many and which images to put, or in other words to make a carousel with images of the database.

I will explain in as much detail as possible. Well, I do not get much carousel either.

First, to make the images run, to make an indication of how many images they are (in my case they are some balls) and to appear an arrow, one to the left, another to the right, to change the image , we need some plugins:

  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">

  

You can see more details about this and everything I will explain here .

Then for these poles mentioned above we need a list, but as we do not know how many images are we make a counter:

<ol class="carousel-indicators">
<?php 
    $con = mysqli_connect("localhost","root","","saber");
    mysqli_set_charset($con,"utf-8");
    $result = mysqli_query($con,"select * from banners");

    $ac = 0;
    $active = 'active';
    while($row = mysqli_fetch_array($result)){
        echo "<li data-target='#myCarousel' data-slide-to='$ac' class='$active'></li>";
        $ac++;
        $active = '';
    }
?>
</ol>

Now for the images, we decide which image to appear first used class = "active" and the above plugins try to rotate the images. But we are using a carousel that we do not even know what the images are, so as on the site I have a form that inserts the path of the images in the database and saves the images in the file just go and look for them. And for this we use:

<?php
    $con = mysqli_connect("localhost","root","","saber");
    mysqli_set_charset($con,"utf-8");
    $result = mysqli_query($con,"select * from banners");

    $active = 'active';
    while($row = mysqli_fetch_array($result)){
        $img = $row['imagem'];
        echo "<div class='item $active'>
        <img src='php/$img' alt='Saber' width='460' height='345'>
      </div>";
      $active = '';
  }
?>

As said the active is just to say which image goes first so we created a variable to save "active" outside the while and inside it we put the empty variable.

Finally, it is only necessary to define the arrows that I have just mentioned so we use:

<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
  <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
  <span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
  <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
  <span class="sr-only">Next</span>
</a>

These classes come from the plugins just call them to make the arrows work.

And at the end so that you search, show, and rotate the database images the code must be so .

Thank you!

    
17.07.2015 / 17:10
10

Using the information available in the source from where you extracted the carousel , through code analysis, the CSS class with the name active should only be present in a single element, the one you want to be active when loading the page.

Then the Plug-in tries to change the class to the next element and thus "create" the carousel .

Your code prepared to deal with a single active element, and an indicator for each image exist, also taking into account the absence of images and / or the presence of only one image would look like this:

<?php

// Estabelecer ligação à base de dados
$con = mysqli_connect("localhost","root","","saber");

// Definir encoding
mysqli_set_charset($con,"utf-8");

// Recolher resultados
$result = mysqli_query($con,"select * from banners");

/* Por cada resultado, preparar a saída
 */
$imagesHtml = '';

$indicatorDotsHtml = '';

$i = 0;

while($row = mysqli_fetch_array($result)) {

    $filename = $row['imagem'];

    // classe "active" apenas no primeiro elemento
    $active = $i==0 ? 'active' : '';

    // criar HTML para a imagem
    $imagesHtml.= '
    <div class="item '.$active.'">
        <img src="php/'.$filename.'" alt="'.$filename.'" />
    </div>';

    // criar HTML para o indicador da imagem
    $indicatorDotsHtml.= '
    <li data-target="#myCarousel" data-slide-to="'.$i.'" class="'.$active.'"></li>';

    $i++;
}


/* Preparar a saída para o navegador
 */
if (!empty($imagesHtml)) {

    /* Verificar se precisamos de navegação
     */
    $navHtml = '';

    if ($i>1) {

        $indicatorsHtml = '
        <ol class="carousel-indicators">
            '.$indicatorDotsHtml.'
        </ol>';

        $navHtml = '
        <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
            <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
        </a>
        <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
            <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
        </a>';
    }

    /* Enviar saída para o navegador
     */
    echo '
    <div id="myCarousel" class="carousel slide" data-ride="carousel">

        <!-- Indicators -->
        '.$indicatorsHtml.'

        <!-- Wrapper for slides -->
        <div class="carousel-inner" role="listbox">
            '.$imagesHtml.'
        </div>

        <!-- Left and right controls -->
        '.$navHtml.'

    </div>';
}
?>

Note:
It is always helpful to consult the official plug-in documentation for a better understanding of how it works and what options we have at our disposal:

Bootstrap - Carousel

    
15.07.2015 / 20:42
4

The subject is the subclass 'active' in the images. active can only be for an image (in this case it is the first image). In the first iteration of while, the div will have the subclass active, the following divs will only be created with the class item. With this code here, It Works Correctly:

<?php 
$con = mysqli_connect("localhost","root","","saber");
mysqli_set_charset($con,"utf-8");
$result = mysqli_query($con,"select * from banners");
$subclass = 'active';
while($row = mysqli_fetch_array($result)){
$img = $row['imagem'];
echo "<div class='item $subclass'>
  <img src='php/$img'>
</div>";
$subclass='';
}
?>
    
15.07.2015 / 19:33
3
<?php
$con = mysqli_connect("localhost","root","","saber");
mysqli_set_charset($con,"utf-8");
$result = mysqli_query($con,"select * from banners");
$classe = 'active';
while($row = mysqli_fetch_array($result)){
$img = $row['imagem'];
echo "<div class='item" . $classe.">".
"<img src='php/$img'>
</div>";
$classe = '';
}
?>

* Remember to add libraries:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <script src="https://code.jquery.com/jquery-1.11.3.js"></script><scriptsrc="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

* I simulated the code and it worked, I uploaded the code in the dropbox to see the effect: Link

    
13.07.2015 / 18:17
2

Try this:

$conexao = mysqli_connect("localhost","root","","saber");
mysqli_set_charset($conexao,"utf-8");
$result = mysqli_query($conexao,"select * from banners");

$contador = 0;
while($row=mysqli_fetch_array($result){

    $contador++;
    if($contador==0) $classe = ""; else $classe = "active";
    $img = "php/".$row['imagem'];

    echo "<div class='item {$classe}'>";
    echo "<img src='{$img}'>";
    echo "<div>";

}

Note the form of contact of variables {$var} .

Do not forget to check if the CSS are active and working ... jQuery can also interfere, the good thing is you put the whole code, including the top with the jquery and css requests.

    
14.07.2015 / 04:46