<?php
session_start(); //coloca isso no arquivo seguranca.php, assim não precisa digitar em todas as páginas!
require_once("../seguranca.php"); //se aqui ele já chama o conect.php não precisa chamar o conect.php na linha de baixo de novo
require_once('../conect.php'); //connect.php, connect é com 2 n
?>
<!DOCTYPE html>
<html>
<head>
<!--Define a viewport-->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="utf-8">
<!--adicionar css Bootstrap-->
<link href="../css/bootstrap.css" rel="stylesheet" media="screen">
<link href="../css/fileinput.css" rel="stylesheet" media="screen">
<link href="../css/bootstrap.min.css" rel="stylesheet">
<!--css personalizado-->
<link href="../css/estilo4.css" rel="stylesheet" media="screen">
<link href="https://fonts.googleapis.com/css?family=Arvo|Cabin|Fjalla+One|Inconsolata|Indie+Flower|Merriweather|Mogra|Open+Sans" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script><linkrel="shortcut icon" href="../favicon.ico">
<link href="https://fonts.googleapis.com/css?family=Arvo|Cabin|Fjalla+One|Inconsolata|Indie+Flower|Merriweather|Mogra|Open+Sans" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script><title>PainelAdministrativoCasadosConselhos</title></head><style>body{background:url(../imagens/solucao.png)no-repeatcentercenterfixed;background-size:cover;/*Csspadrão*/-webkit-background-size:cover;/*Csssafariechrome*/-moz-background-size:cover;/*Cssfirefox*/-ms-background-size:cover;/*CssIEnãousemer#^@%#*/-o-background-size:cover;/*CssOpera*/}welcome{color:white;font-family:'Merriweather',serif;text-shadow:3px3px3pxblack;background-color:cadetblue;}</style><body><navclass="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand text-justify ">
<div class="visible-xs hidden-sm hidden-md hidden-lg">
<div class="textbrandbempequeno"><img src="../imagens/brand2.png"><b>Administração</b></div>
</div>
<div class="hidden-xs visible-sm hidden-md hidden-lg">
<div class="textbrandpequeno"><img src="../imagens/brand2.png"><b>Administração</b></div>
</div>
<div class="hidden-xs hidden-sm visible-md hidden-lg">
<div class="textbrandmedio"><img src="../imagens/brand2.png"><b>Administração</b></div>
</div>
<div class="hidden-xs hidden-sm hidden-md visible-lg visible-xl">
<div class="textbrand"><img src="../imagens/brand2.png"><b>Administração</b></div>
</div>
</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
</ul>
<ul class="nav navbar-nav navbar-right text-center">
<li><a href="painel.php">Home</a></li>
<li class="active"><a href="slider.php">Slider</a></li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown">Cadastrar
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="Cadastrapvisual/Cad_vBancodeImagens.php">Banco de Imagens</a></li>
<li><a href="Cadastrapvisual/Cad_vInformativo.php">Informativo</a></li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown">Editar
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="consultedit/consulta_banco.php">Banco de Imagens</a></li>
<li><a href="consultedit/consulta_infor.php">Informativo</a></li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown">Visualizar
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="Visualizacao/Visubanco.php">Banco de Imagens</a></li>
<li><a href="Visualizacao/VisuInformativo.php">Informativo</a></li>
</ul>
</li>
<li><a href="sair.php">Sair</a></li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
<?php
$consulta = "SELECT * FROM slider";
$cons = mysqli_query($conect_phpmyadmin, $consulta);
$rs = mysqli_fetch_assoc($cons);
$rs =$imagem = "../uploads/".$rs["desc_img"];
mysqli_query($conect_phpmyadmin, $consulta);
?>
<div class="container-fluid">
<div class="row">
<div class="col-xs-12 col-md-8 co-lg-11">
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="<?php echo $imagem ?>">
</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>
<hr class="transition-timer-carousel-progress-bar" />
<hr class="transition-timer-carousel-progress-bar" />
<!-- Faz o efeito da barra de rolagem do slide-->
<script type="text/javascript">
$(document).ready(function(){
var percent = 0, bar = $('.transition-timer-carousel-progress-bar'), crsl = $('#myCarousel');
function progressBarCarousel() {
bar.css({width:percent+'%'});
percent = percent +0.5;
if (percent>100) {
percent=0;
crsl.carousel('next');
}
}
crsl.carousel({
interval: false,
pause: true
}).on('slid.bs.carousel', function () {});var barInterval = setInterval(progressBarCarousel, 30);
crsl.hover(
function(){
clearInterval(barInterval);
},
function(){
barInterval = setInterval(progressBarCarousel, 30);
})
});
</script>
</div>
<div class="col-xs-12 col-md-4 co-lg-1">
<div class="btn-group-vertical" role="group" aria-label="12">
<div class="col-xs-12 col-md-12 co-lg-12">
<div class="espaco">-</div>
</div>
<div class="col-xs-12 col-md-12 co-lg-12"><a href="add_slider.php" style="color:white" data-toggle="modal" data-target="#myModal"><button type="button" class="btn btn-estilo2 btn-lg btn-lg btn-block" role="button"><span class="glyphicon glyphicon-plus"></span>Adicionar mais fotos</button></a></div>
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
</div>
</div>
</div>
<div class="col-xs-12 col-md-12 co-lg-12">
<div class="espaco">-</div>
</div>
<div class="col-xs-6 col-md-12 co-lg-12"><a href="Ouvidoria.html" style="color:white"><button type="button" class="btn btn-estilo3 btn-lg btn-block" ><span class="glyphicon glyphicon-picture"></span>Ver fotos uma por uma</button></a></div>
<div class="col-xs-6 col-md-12 co-lg-12"><button type="button" class="btn btn-estilo3 btn-lg btn-block"><span class="glyphicon glyphicon-edit"></span>Trocar fotos</button></div>
<div class="col-xs-12 col-md-12 co-lg-12">
<div class="espaco">-</div>
</div>
<div class="col-xs-12 col-md-12 co-lg-12"><button type="button" class="btn btn-estilo2 btn-lg btn-lg btn-block"><span class="glyphicon glyphicon-trash"></span>Apagar fotos</button></div>
<div class="col-xs-12 col-md-12 co-lg-12">
<div class="espaco">-</div>
</div>
</div>
</div>
</div>
</div>
<script src="../js/jquery-3.1.1.min.js"></script>
<script src="../js/bootstrap.min.js"></script>
<script src="../js/main.js"></script>
<script src="../js/fileinput.min.js"></script>
</body>
</html>
How to do my while repeat the div but change the images of the Bootstrap slider
0
asked by anonymous 12.01.2018 / 18:36
1 answer
0
Just add the following code inside the div with the carousel-inner class.
<?php
$primeiro = true;
$consulta = "SELECT * FROM slider";
$cons = mysqli_query($conect_phpmyadmin, $consulta);
while ($row = mysqli_fetch_assoc($cons)) {
if($primeiro){
echo '<div class="item active">';
$primeiro = false;
}else{
echo '<div class="item">';
}
echo '<img src="../uploads/"'.$row["desc_img"]>;
echo '</div>';
}
?>
12.01.2018 / 19:31