1

<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="carousel-item active">
            <img class="first-slide" src="images/website.jpg" alt="First slide">
            <div class="container">
              <div class="carousel-caption text-left">
                <h1>OPEN S.</h1>
                <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
                <p><a class="btn btn-lg btn btn-danger" href="#" role="button">Saiba Mais !</a></p>
              </div>
            </div>
          </div>
          <div class="carousel-item">
            <img class="second-slide" src="images/business.jpg" style="height: 510px;" alt="Second slide">
            <div class="container">
              <div class="carousel-caption">
                <h1>Open S.</h1>
                <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
                <p><a class="btn btn-lg btn btn-danger" href="#" role="button">Saiba Mais !</a></p>
              </div>
            </div>
          </div>
          <div class="carousel-item">
            <img class="img-fluid"  src="images/mine.png" width="1000" height="249" alt="Third slide">
            <div class="container">
              <div class="carousel-caption text-right">
                <h1>Open S</h1>
                <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
                <p><a class="btn btn-lg btn btn-danger" href="#" role="button">Saiba Mais !</a></p>
              </div>
            </div>
          </div>
        </div>
        <a class="carousel-control-prev" href="#myCarousel" role="button" data-slide="prev">
          <span class="carousel-control-prev-icon" aria-hidden="true"></span>
          <span class="sr-only">Previous</span>
        </a>
        <a class="carousel-control-next" href="#myCarousel" role="button" data-slide="next">
          <span class="carousel-control-next-icon" aria-hidden="true"></span>
          <span class="sr-only">Next</span>
        </a>
      </div>

inserir a descrição da imagem aqui

3
  • Quais são as imagens?
    – Sam
    8/02/2018 às 3:24
  • Estou vendo aqui que cada imagem tem um tamanho diferente: <img class="first-slide" src="images/website.jpg" alt="First slide">, <img class="second-slide" src="images/business.jpg" style="height: 510px;" alt="Second slide">, <img class="img-fluid" src="images/mine.png" width="1000" height="249" alt="Third slide">
    – Sam
    8/02/2018 às 3:29
  • 1
    Pra ficar responsivo, ou vc coloca todas as imagens do mesmo tamanho (sem referenciar tamanho) ou remove todas as referências de tamanho.
    – Sam
    8/02/2018 às 3:36

0

Você deve fazer log-in para responder a esta pergunta.

Pesquise outras perguntas com a tag .