Slide Responsive Boostrap

Navigation
1

Hello, I would like to add a full slide in my head using the bootstrap, just like the image example:

Couldyouhelpme?IfyouwanttoviewmystructureI'mleavingthelinkfrommyrepositoryingithub: link

    
asked by anonymous 28.06.2017 / 20:53

1 answer

2

To solve your case, use the Bootstrap Carousel plugin. It's very simple!

Each plugin can be added individually (in its case using the individual "carousel.js" Bootstrap file), or all at once (using "bootstrap.js" or "bootstrap.min.js").

Does not work correctly in versions under 10 of Internet Explorer.

Indicators (carousel-indicators): Adds indicators to the carousel. These are the small dots at the bottom of each slide (which indicates how many slides there are in the carousel and what slide the user is currently viewing);

Inner (carousel-inner): Adds slides to carousel

For more information, consult the documentation at :
link or link

Follow Example: 

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Slider</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script><scriptsrc="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <div id="myCarousel" class="carousel slide" data-ride="carousel">

    <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>
    </ol>

    <div class="carousel-inner">
      <div class="item">
        <img src="https://raw.githubusercontent.com/luismatheusbs16/auto-jet/master/images/slide-pag-inicial.jpg"alt="New york" style="width:100%;">
        <div class="carousel-caption">
        <h3>Titulo</h3>
            <p>Comentários</p>
        </div>
      </div>

      <div class="item active">
        <img src="https://raw.githubusercontent.com/luismatheusbs16/auto-jet/master/images/banner-pag-inicial.jpg"alt="Los Angeles" style="width:100%;">
         <div class="carousel-caption">
         <h3>Titulo</h3>
            <p>Comentários</p>
        </div>
      </div>

      <div class="item">
        <img src="https://raw.githubusercontent.com/luismatheusbs16/auto-jet/master/images/slide-quem-somos.jpg"alt="Chicago" style="width:100%;">
         <div class="carousel-caption">
         <h3>Titulo</h3>
            <p>Comentários</p>
        </div>
      </div>
    </div>

    <a class="left carousel-control" href="#myCarousel" data-slide="prev">
      <span class="glyphicon glyphicon-chevron-left"></span>
      <span class="sr-only">Anterior</span>
    </a>
    <a class="right carousel-control" href="#myCarousel" data-slide="next">
      <span class="glyphicon glyphicon-chevron-right"></span>
      <span class="sr-only">Próxima</span>
    </a>
  </div>
</div>

</body>
</html>
    
28.06.2017 / 21:35
Numeric values in php session variable Add buttons in table rows