Boostrap Responsive Slide

Asked

Viewed 424 times

1

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

inserir a descrição da imagem aqui

Could you help me ? If you want to view my structure I’m leaving the link of my repository on github: https://github.com/luismatheusbs16/auto-jet.git

css bootstrap-3

1 answer

1


To solve your case, use the Carousel plugin from Bootstrap. It’s quite simple!

Each plugin can be included individually ( in your file using the "Carousel.js" individual Bootstrap file), or all at once (using "bootstrap.js" or "bootstrap.min.js").

Does not work properly in versions below 10 of Internet Explorer.

Indicators (Carousel-Indicators): Add indicators to the carousel. These are the little dots at the bottom of each slide (which indicates how many slides there are on the carousel and which slide the user is currently viewing);

Inner (Carousel-Inner): Add slides to the carousel

For more information see the documentation on:
http://getbootstrap.com/javascript/#Carousel or https://www.w3schools.com/bootstrap/bootstrap_ref_js_carousel.asp

Follows 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>
  <script src="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>

  • Thank you, I’ll make the necessary modifications

  • Marcus in case I would like to add the slide behind the menu and my logo, as if it were the background of the head

Browser other questions tagged css bootstrap-3

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