Carrossel

[đŗaѵєη 220]

Boas pessoal,

Estou a fazer um site para a minha PAT, e queria colocar na página inicial um carrossel para passar os destaques.

O problema é que ao passar as imagens pela base de dados não me mostra um a um, (para puder andar para o lado a ver um a um) mostra-me tudo seguido, como no print.

 

 

O código do carrossel, a conexão à bd e a consulta são estes:

 

 	$hostname = "localhost";
 	$username = "root";
 	$password = "";
  	$database = "pat";
	$connection = mysqli_connect ($hostname, $username, $password, $database);

	$query = "SELECT * FROM destaques";
	$result = mysqli_query($connection, $query);

 <section id="main-slider" class="no-margin">
    <?php while ($x = mysqli_fetch_array ($result)) { ?>
        <div class="carousel slide">
            <ol class="carousel-indicators">
                <li data-target="#main-slider" data-slide-to="0"></li>
                <li data-target="#main-slider" data-slide-to="1"></li>
                <li data-target="#main-slider" data-slide-to="2"></li>
            </ol>
            <div class="carousel-inner">
                <div class="item active" style="background-image: url(backoffice/destaques/imagens/<?= $x ['imagens'] ?>)">
                    <div class="container">
                        <div class="row slide-margin">
                            <div class="col-sm-6">
                                <div class="carousel-content">
                                    <h1 class="animation animated-item-1"><?= $x ['destaques']; ?></h1>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div><!--/.carousel-inner-->
        </div><!--/.carousel-->
        <?php } ?>
        <a class="prev hidden-xs" href="#main-slider" data-slide="prev">
            <i class="fa fa-chevron-left"></i>
        </a>
        <a class="next hidden-xs" href="#main-slider" data-slide="next">
            <i class="fa fa-chevron-right"></i>
        </a>
    </section><!--/#main-slider-->

 

Caso alguém já o tenha feito ou saiba fazê-lo agradecia que me ajudassem. 

Obrigado e cumprimentos!

Edited June 19, 2017 by đŗaѵєη (see edit history)

[Loading 480]

 

 

Experimenta ver esse tutorial, acho que é isso que queres, ou algo parecido, no caso podes adaptar...

 

[Cσяvσ⋆ 1,804]

Não precisas de tanto filme por causa de um Slider...

 

https://www.w3schools.com/bootstrap/bootstrap_carousel.asp