HTML slider from PC folder

0

I want to make a Slider taking into account the direction of the images I'm looking for. Does anyone know how I can do this?

 <?php
    $dir = opendir("img");
    while ($file = readdir($dir)) {
    if ($file != "." && $file != ".." && $file != "$NAMEFILE") {
        $data[$file]='<div class="slider"> <img src="img/'.$file.'" alt="'.$file.'" width="90%" height="90%"/> </div>';
            }}
            rsort($data);
            while(list($k,$v) = each($data)) { echo $v; }
            clearstatcache();       
    ?>
    
asked by erick 28.11.2017 в 01:37
source

1 answer

0

#imagen
{
  width: 100%;
  height: 50%;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>



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

  <!-- Wrapper for slides -->
  <div class="carousel-inner" role="listbox">
    <div class="item active">
      <img id="imagen" src="https://www.fourseasons.com/content/dam/fourseasons/images/web/NYF/NYF_395crop_1280x486.jpg/jcr:content/renditions/cq5dam.web.1280.1280.jpeg" alt="...">
      <div class="carousel-caption">
        <h3>New York</h3>
        <p>Aquí puedes escribir un breve resumen sobre NY</p>
      </div>
    </div>
    <div class="item" >
      <img id="imagen" src="https://images.frmonline.com/sites/frc/pct/chicago/moving-to-living-in-chicago-784.jpg" alt="...">
      <div class="carousel-caption">
        <h3>Chicago</h3>
        <p>Aquí puedes escribir un breve resumen sobre Chicago</p>
      </div>
    </div>
    <div class="item" >
      <img id="imagen" src="https://freedomchurchphilly.org/wp-content/uploads/2016/12/philadelphia-skyline-at-night-wallpaper-4.jpg" alt="...">
      <div class="carousel-caption">
        <h3>Philadelphia</h3>
        <p>Aquí puedes escribir un breve resumen sobre Philadelphia</p>
      </div>
    </div>
  </div>

  <!-- Controls -->
  <a class="left carousel-control" href="#carousel-example" role="button" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
    <span class="sr-only">Atrás</span>
  </a>
  <a class="right carousel-control" href="#carousel-example" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
    <span class="sr-only">Siguiente</span>
  </a>
</div>

Because you do not implement the Bootstrap library, it's a cleaner and more accurate way to do what you expect with a Slider.

For more information you can click here

    
answered by 28.11.2017 в 02:45