1

Olá, Preciso ajustar os botôes do carrousel do bootstrap para que fique junto a foto, hoje conforme a foto em anexo os botôes ultrapassam a area desejada.

alguem pode me ajudar?inserir a descrição da imagem aqui

Esse é o codigo html do meu carrousel, css ta vindo via bootstrap.

 <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
  <!-- Indicators -->


  <!-- Wrapper for slides -->
  <div class="carousel-inner" role="listbox">
    <div class="item active">
      <img src="img/fotos/1.jpg" alt="Slide 1">
      
    </div>
    <div class="item">
      <img src="img/fotos/2.jpg" alt="Slide 2">
      
    </div>
    <div class="item">
      <img src="img/fotos/3.jpg" alt="Slide 3">
      
    </div>        
  </div>

  <!-- Controls -->
  <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev" >
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

6
  • Daniel, poste seu código para ficar mais fácil de lhe ajudar, olhando apenas essa imagem, não conseguimos identificar o que está ocorrendo. Commented 8/02/2018 às 11:13
  • Eu gostaria que os botoes que alteram a imagem do carrousel ficassem juntos a foto, hoje no meu projeto a foto fica do tamanho que eu gostaria mais os botoes pegam a largura toda da pagina. Commented 8/02/2018 às 11:25
  • Certo, para isso, poste seu código para que possamos lhe ajudar. Commented 8/02/2018 às 11:38
  • Postei o código da minha sessão que contera o carrousel.eu gostaria de chegar nesse resultado. interleite.com.br/sul Commented 8/02/2018 às 12:04
  • Cara o exemplo que vc postou não é com o Slider do Bootstrap! É com o Slider do Flexslider flexslider.woothemes.com
    – hugocsl
    Commented 8/02/2018 às 12:43

2 Respostas 2

1

Daniel de acordo com o Exemplo que vc postou de outro site eu fiz esse modelo com Bootstrape, apesar do site de referencia usar o Flexslider

Esse modelo tem 4 imagens por Slider, mas vc pode adaptar com CSS da forma que achar melhor. Inclusive é preciso que vc faça regras de @media caso queira ele responsivo para telas pequenas.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Page Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
    <link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" />
    <link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
<style>
    .teste {
        display: flex;
        flex-grow: 1;
    }
    .teste img{
        width: 100%;
    }
</style>
</head>
<body>
    
    <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
        <!-- Indicators -->
      
        <!-- Wrapper for slides -->
        <div class="carousel-inner" role="listbox">
          <div class="item active">
            <div class="teste">
                <img src="http://placeskull.com/200/200" alt="Slide 1">
                <img src="http://placecage.com/200/210" alt="Slide 3">
                <img src="http://placeskull.com/200/220" alt="Slide 3">
                <img src="http://placeskull.com/200/230" alt="Slide 3">
            </div>
          </div>
          <div class="item">
            <div class="teste">
                <img src="http://placeskull.com/200/220" alt="Slide 3">
                <img src="http://placeskull.com/200/210" alt="Slide 3">
                <img src="http://placeskull.com/200/200" alt="Slide 1">
                <img src="http://placecage.com/200/230" alt="Slide 3">
            </div>
          </div>
          <div class="item">
            <div class="teste">
                <img src="http://placecage.com/200/200" alt="Slide 1">
                <img src="http://placeskull.com/200/220" alt="Slide 3">
                <img src="http://placeskull.com/200/230" alt="Slide 3">
                <img src="http://placeskull.com/200/210" alt="Slide 3">
            </div>
          </div>        
        </div>
      
        <!-- Controls -->
        <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev" >
          <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
          <span class="sr-only">Previous</span>
        </a>
        <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
          <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
          <span class="sr-only">Next</span>
        </a>
      </div>
    
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>

1

Nesse caso, como o carrossel não está envolvido em nenhuma div, o mesmo ficará com 100% de largura, e também está acrescentando um padding-right default.

Fiz uma edição que funcionará caso o carrossel for ocupar metade da tela, envolvi o mesmo em uma classe col-md-6 e no CSS apliquei a regra para retirar o padding-right que ele acrescenta. Você pode realizar as edições de acordo com a sua necessidade, isso foi apenas um exemplo para a solução do seu problema.

.col-md-6{
   padding-right: 133px !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<div class="col-md-6">
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
  <!-- Indicators -->

  <!-- Wrapper for slides -->
  <div class="carousel-inner" role="listbox">
    <div class="item active">
      <img class="img-responsive" src="http://2.bp.blogspot.com/-CmBgofK7QzU/TVj3u3N1h2I/AAAAAAAADN8/OszBhGvvXRU/s640/tumblr_lg7h9gpbtP1qap9qio1_500.jpeg" alt="Slide 1">
      
    </div>
    <div class="item">
      <img class="img-responsive" src="https://upload.wikimedia.org/wikipedia/pt/archive/c/cd/20101122222142%21The-catalyst-single-cover-500x500.png" alt="Slide 2">
      
    </div>
    <div class="item">
      <img class="img-responsive" src="https://inst.eecs.berkeley.edu/~cs194-26/fa16/upload/files/proj4/cs194-26-adl/images/dog.jpg" alt="Slide 3">
      
    </div>        
  </div>

  <!-- Controls -->
  <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev" >
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>
</div>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"> </script>

3
  • 1
    Lembrando que no caso de querer usar o carrosel com width:100% ou seja, ocupando o espaço inteiro do documento, você terá que ter imagens que ocupem esse espaço todo, caso não ocupe, ficará como na sua postagem, o carrosel ocupa 100% mas a imagem é pequena para ocupar o espaço todo. Commented 8/02/2018 às 12:28
  • Vou tentar, obrigado! Commented 8/02/2018 às 12:40
  • 1
    @DanielPelissari, nesse modo que está feito eles não utilizam o bootstrap, utilizam outro plugin que agrupa várias imagens, deixando com aquele aspecto, eles estão usando o plugin lightGallery. Commented 8/02/2018 às 12:43

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 .