How to make my while repeat the div but change the images from the Bootstrap slider

Asked

Viewed 36 times

0

<?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>
        <link rel="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>Painel Administrativo Casa dos Conselhos</title>
    </head>
    <style>
        body{
        background: url(../imagens/solucao.png) no-repeat center center fixed;
        background-size: cover; /*Css padrão*/
        -webkit-background-size: cover; /*Css safari e chrome*/
        -moz-background-size: cover; /*Css firefox*/
        -ms-background-size: cover; /*Css IE não use mer#^@%#*/
        -o-background-size: cover; /*Css Opera*/
        }
        welcome{  
        color: white;
        font-family: 'Merriweather', serif;
        text-shadow: 3px 3px 3px black;
        background-color: cadetblue;
        }  
    </style>
    <body>
        <nav class="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>

1 answer

0


Simply add the following code within the div with class Carousel-Inner.

<?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>';
    }
?>

Browser other questions tagged

You are not signed in. Login or sign up in order to post.