1

Gostaria de saber, como faço para centralizar as imagens (ou o slider) do carousel no bootstrap 4?

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

	  <!-- The slideshow -->
	  <div class="carousel-inner center-block">
	    <div class="carousel-item active">
	      <img src="https://www.adminserver.com.br/imagens_banner/1274.png" alt="Los Angeles">
	    </div>
	    <div class="carousel-item">
	      <img src="https://www.adminserver.com.br/imagens_banner/1275.png" alt="Chicago">
	    </div>
	  </div>

	  <!-- Left and right controls -->
	  <a class="carousel-control-prev" href="#demo" data-slide="prev">
	    <span class="carousel-control-prev-icon"></span>
	  </a>
	  <a class="carousel-control-next" href="#demo" data-slide="next">
	    <span class="carousel-control-next-icon"></span>
	  </a>

	</div>

Gostaria que ela ficasse assim a

Mas fica assim... inserir a descrição da imagem aqui

2
  • Jhonattan lendo a sua conversa com na resposta do Leandro acho que entendi melhor o que vc quer. Depois da uma olhada na minha resposta que eu fiz uma edição nela, apenas coloquei a classe Row padrão do Bootstrap na div do slider e ficou 100% de largura com imagem centralizada.
    – hugocsl
    16/05/2018 às 22:16
  • Tenta colocar a class "self-align-items" dentro da div do seu carousel. 12/08/2019 às 15:15

4 Respostas 4

1

É isto o que vc está querendo?

$('.carousel').carousel()
.navbar {
 background-color: yellow;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet"/>

<nav class="navbar">
  <span class="navbar-brand mb-0 h1">Navbar</span>
</nav>

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

	  <!-- The slideshow -->
	  <div class="carousel-inner center-block">
	    <div class="carousel-item active">
	      <img class="d-block w-100" src="https://www.adminserver.com.br/imagens_banner/1274.png" alt="Los Angeles">
	    </div>
	    <div class="carousel-item">
	      <img class="d-block w-100" src="https://www.adminserver.com.br/imagens_banner/1275.png" alt="Chicago">
	    </div>
	  </div>

	  <!-- Left and right controls -->
	  <a class="carousel-control-prev" href="#demo" data-slide="prev">
	    <span class="carousel-control-prev-icon"></span>
	  </a>
	  <a class="carousel-control-next" href="#demo" data-slide="next">
	    <span class="carousel-control-next-icon"></span>
	  </a>

	</div>
    </div>
 </div>

6
  • Não. Ai no caso está limitado com o container. Eu quero o slide 100% width porém centralizado na página, quando dou um zoom na página ele está no canto esquerdo, nos dois prints que anexei estavam com zoom de 50%. A imagem do carousel não está centralizada, ela está alinhada a esquerda, que deve ser padrão do Bootstrap 16/05/2018 às 17:42
  • Ve se com o que o Hugo fez te ajuda, pq não entendi como vc quer width de 100% mas centralizado.
    – LeAndrade
    16/05/2018 às 17:46
  • Esse é o slide do site: i.imgur.com/ptt44KV.png ### Esse é o slide no meu local host: i.imgur.com/nKnVX5z.png Eu quero centralizar essa imagem do slide, os prints que coloquei no meu post as páginas estão com 50% de zoom. 16/05/2018 às 17:50
  • A resolução da imagem é muito grande?
    – LeAndrade
    16/05/2018 às 18:01
  • Esse é o tamanho da imagem: 1904 x 290px 16/05/2018 às 18:05
1

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="css/bootstrap.min.css">

<style type="text/css">

    .flex{

        display: flex;
        flex-wrap: wrap;
        width: 100%;
        margin: 0 auto;
    }


</style>

<div class="flex">

    <div id="demo" class="carousel slide center" data-ride="carousel">

        <div class="carousel-inner center-block">

            <div class="carousel-item active">

                <img src="https://www.adminserver.com.br/imagens_banner/1274.png" alt="Los Angeles" width="100%">

            </div>
            <div class="carousel-item">

                <img src="https://www.adminserver.com.br/imagens_banner/1275.png" alt="Chicago" width="100%">

            </div>

        </div>


        <a class="carousel-control-prev" href="#demo" data-slide="prev">

            <span class="carousel-control-prev-icon"></span>

        </a>
        <a class="carousel-control-next" href="#demo" data-slide="next">

            <span class="carousel-control-next-icon"></span>

        </a>

    </div>

</div>          

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

1

<html>
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

</head>
<body>
<header>
<nav class="navbar navbar-expand-lg navbar-dark bg-warning">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#corNavbar02" aria-controls="corNavbar02" aria-expanded="false" aria-label="Alterna navegação">
      <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse" id="corNavbar02">
      <ul class="navbar-nav mr-auto">
        <li class="nav-item active">
          <a class="nav-link" href="#">Home <span class="sr-only">(Página atual)</span></a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Destaques</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Preços</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Sobre</a>
        </li>
      </ul>
      <form class="form-inline">
        <input class="form-control mr-sm-2" type="search" placeholder="Pesquisar" aria-label="Pesquisar">
        <button class="btn btn-outline-light my-2 my-sm-0" type="submit">Pesquisar</button>
      </form>
    </div>
  </nav>
</header>

<div class="container">
   <div class="row">
      <div class="col"></div>
         <div class="col-6">
           <div id="demo" class="carousel slide" data-ride="carousel">
              <!-- The slideshow -->
              <div class="carousel-inner center-block">
                <div class="carousel-item active">
                   <img src="https://www.adminserver.com.br/imagens_banner/1274.png" alt="Los Angeles">
                </div>
                <div class="carousel-item">
                   <img src="https://www.adminserver.com.br/imagens_banner/1275.png" alt="Chicago">
                </div>
             </div>

             <!-- Left and right controls -->
             <a class="carousel-control-prev" href="#demo" data-slide="prev">
               <span class="carousel-control-prev-icon"></span>
             </a>
             <a class="carousel-control-next" href="#demo" data-slide="next">
                <span class="carousel-control-next-icon"></span>
             </a>
         </div>
      </div>
      <div class="col"></div>
   </div>
</div>

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
</body>
</html>

não entendi, toda essa tempestade só para centralizar, isso voce faz usando ate <center></center>, se queres responsivo, porque não usa grid ?

copie o código abaixo e cole lá no teu site

<div class="container">
   <div class="row">
      <div class="col"></div>
         <div class="col-6">
           <div id="demo" class="carousel slide" data-ride="carousel">
              <!-- The slideshow -->
              <div class="carousel-inner center-block">
                <div class="carousel-item active">
                   <img src="https://www.adminserver.com.br/imagens_banner/1274.png" alt="Los Angeles">
                </div>
                <div class="carousel-item">
                   <img src="https://www.adminserver.com.br/imagens_banner/1275.png" alt="Chicago">
                </div>
             </div>

             <!-- Left and right controls -->
             <a class="carousel-control-prev" href="#demo" data-slide="prev">
               <span class="carousel-control-prev-icon"></span>
             </a>
             <a class="carousel-control-next" href="#demo" data-slide="next">
                <span class="carousel-control-next-icon"></span>
             </a>
         </div>
      </div>
      <div class="col"></div>
   </div>
</div>

mantenha <div class="col"></div>, serve de margem, a não ser que deseje ter três colunas, ai você coloca o conteúdo entre as divs.

Regule a margem da seguinte forma(substituindo a classe col):

Largura máxima do container:  (auto) |   540px  |   720px  |   960px    |   1140px
Prefixo em classe              .col- | .col-sm- | .col-md- |  .col-lg-  |  .col-xl-

Você pode usar de 1 a 6, por exemplo: .col-sm-4, para se aproximar da próxima classe, ou manter .col-sm para permitir que o navegador decida.

-1

Se quiser apenas centralizar a imagem:

.carousel-inner> .item> img { 
margem: auto; 
}

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 .