1

estou tentando deixar esse carousel + 3 box em horizontal inserir a descrição da imagem aqui

eu usei mr-auto para deixar o carousel na direita e ml-auto nas box para ficar esquerda e tentei usar um d-inline-block, mas não foi... ( estou usando bootstrap)

<div  class="container">
<div id="caroulstt" class="carousel slide carousel-fade mt-4 h-auto w-50 mr-auto" data-ride="carousel">

    <ol class="carousel-indicators">
        <li data-target="#caroulstt" data-slide-to="0" class="active"></li>
        <li data-target="#caroulstt" data-slide-to="1"></li>
        <li data-target="#caroulstt" data-slide-to="2"></li>
    </ol>

    <div class="carousel-inner">
        <div class="carousel-item active">
            <img src="images/sd1.png" class="img-fluid d-block">
        </div>
        <div class="carousel-item">
            <img src="images/sd2.png" class="img-fluid d-block">
        </div>
        <div class="carousel-item">
            <img src="images/sd1.png" class="img-fluid d-block">
        </div>
    </div>
</div>
    <div class="boxone ml-auto"></div>

    <div class="boxone ml-auto mt-3"></div>
</div>
2
  • Felipe por acaso vc está usando Bootstrap 4?
    – hugocsl
    Commented 1/10/2018 às 12:49
  • estou sim o 4.1.3 .
    – Felipe
    Commented 1/10/2018 às 12:51

1 Resposta 1

1

Para funcionar direito vc tem que usar o Grid do Bootstrap... Não basta vc colocar o conteúdo na página sem determinar uma "posição" para esse conteúdo dentro do Grid. Aqui vc pode consultar a documentação do Grid do Bootstrap https://getbootstrap.com/docs/4.0/layout/grid/

Seria legal vc tb dar uma olhada na documentação oficial do Carrocel do Bootstrap, pois o sei tinha algumas divergências do que é sugerido pela documentação: https://getbootstrap.com/docs/4.0/components/carousel/

Veja o exemplo como fica, slider ocupando col-10 e conteúdo a direta col-2, vc pode ir vairando isso, por exemplo com col-6 no carrocel e col-6 no conteúdo cado um deles fica com 50% da largura da tela:

  <link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" />
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>


  
  <div  class="container">
<div class="row">
  <div class="col-10">

    <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
      <ol class="carousel-indicators">
        <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
        <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
        <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
      </ol>
      <div class="carousel-inner">
        <div class="carousel-item active">
          <img class="d-block w-100" src="https://placecage.com/800/300" alt="First slide">
        </div>
        <div class="carousel-item">
          <img class="d-block w-100" src="https://placecage.com/800/300" alt="Second slide">
        </div>
        <div class="carousel-item">
          <img class="d-block w-100" src="https://placecage.com/800/300" alt="Third slide">
        </div>
      </div>
      
    </div>

  </div>
      <div class="col-2">
        <div class="boxone ml-auto">teste 1</div>
    
        <div class="boxone ml-auto mt-3">teste 2</div>
      </div>
</div>
</div>
  
  <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>

13
  • no caso dentro de um container ele tem quantos col? 12? E sobre aumentar a altura da img eu aumento nessa parte? src="placecage.com/800/300" ? pois eu tentei usando h- e não vai ;x
    – Felipe
    Commented 1/10/2018 às 13:20
  • eu não tou conseguindo por as dimensões exatas das img que eu coloco no slide já tentei pelo w - pelo h- e nada.
    – Felipe
    Commented 1/10/2018 às 13:31
  • @Felipe sim o grid tem 12 partes, e vc pode dividir de acordo com o seu layout, desde que sempre somem 12 partes. Tipo col-8 pro slider e col-4 pro conteúdo, ou col-9 pro slider e col-3 pro conteúdo e assim vc chega em algo que te agrade... Sobre as imagens dentro do slider vc tem que usar o código da documentação. Repare que no meu exemplo a imagem preenche 100% da largura do slider sempre, porém as imagens tem alturas diferentes. O ideal é que todas as imagens tenham a mesma proporção altura/largura e não uma de cada tamanho... Se tiver mais alguma dúvida me fala aqui que tento te ajudar.
    – hugocsl
    Commented 1/10/2018 às 13:36
  • essa parte do grid eu consegui dar uma entendida mano, e sobre a imagem eu botei todas no mesmo tamanho 570 - 500, mas quando está no w-100 a altura dela vai pra 650 e o comprimento tb não sei por qual motivo.
    – Felipe
    Commented 1/10/2018 às 13:38
  • @Felipe isso acontece pq a altura da imagem é automática height:auto isso faz com que a altura da imagem acompanhe a largura, assim evitando que uma imagem mais larga do que alta fique "achatada" para caber toda dentro do slider.veja essa imagem reaction.ca/wp-content/uploads/IG-HorizontalExamples.jpg
    – hugocsl
    Commented 1/10/2018 às 13:40

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

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .