1

Olá, eu consegui colocar o carousel do Bootstrap 3 normal igual mostra na documentação, porém estou com dificuldade para colocar o efeito Fade, alguém tem alguma solução para fazer?

<div class="carousel-inner" role="listbox">
  <div class="item active">
    <img src="img/slider1.png" alt="...">
    <div class="carousel-caption">
    </div>
  </div>
  <div class="item">
    <img src="img/slider2.jpg" alt="...">
    <div class="carousel-caption">
      ...
    </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>

Eu estou usando a versão 3. As configurações de estilo é a mesma do bootstrap.

2
  • 1
    Qual versão do Bootstrap vc está usando 3 ou 4? Aproveite e edite a sua pergunta colocando o código que já tem pronto e o css que usou.
    – hugocsl
    Commented 21/04/2018 às 13:16
  • Já fiz a edição colocando o codigo e estou usando a versao 3. Commented 21/04/2018 às 14:48

1 Resposta 1

1

Ismael segue uma versão com o Fade fazer a transição entre um e outro e não a rolagem horizontal como o padrão.

Deixei alguns comentários no CSS que podem te ajudar a controlar a altura a largura e a posição das imagens dentro do Carousel

Veja como ficou no exemplo.

html, body {
  margin: 0;
  height: 100%;
  width: 100%;
}

/* sistema do fade */
.carousel-fade .carousel-inner .item {
  opacity: 0;
  transition-property: opacity;
}
.carousel-fade .carousel-inner .active {
  opacity: 1;
}
.carousel-fade .carousel-inner .active.left,
.carousel-fade .carousel-inner .active.right {
  left: 0;
  opacity: 0;
  z-index: 1;
}
.carousel-fade .carousel-inner .next.left,
.carousel-fade .carousel-inner .prev.right {
  opacity: 1;
}
.carousel-fade .carousel-control {
  z-index: 2;
}

.wrapper {
    width: 80%; /* largura do slider */
    margin: 0 auto;
}
.carousel .item {
  height: 250px; /* altura do slider */
}
.item img { /* centraliza imagem na vertical no slider */
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}
<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.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div class="wrapper">
  <div id="myCarousel" class="carousel slide carousel-fade" data-ride="carousel">
    <!-- Indicators -->
    <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>

    <!-- Wrapper for slides -->
    <div class="carousel-inner">

      <div class="item active">
        <img src="http://placecage.com/100/101" alt="Los Angeles" style="width:100%;">
        <div class="carousel-caption">
          <h3>Los Angeles</h3>
          <p>LA is always so much fun!</p>
        </div>
      </div>

      <div class="item">
            <img src="http://placecage.com/100/102" alt="Los Angeles" style="width:100%;">
        <div class="carousel-caption">
          <h3>Chicago</h3>
          <p>Thank you, Chicago!</p>
        </div>
      </div>
    
      <div class="item">
            <img src="http://placecage.com/100/103" alt="Los Angeles" style="width:100%;">
        <div class="carousel-caption">
          <h3>New York</h3>
          <p>We love the Big Apple!</p>
        </div>
      </div>
  
    </div>

    <!-- Left and right controls -->
    <a class="left carousel-control" href="#myCarousel" data-slide="prev">
      <span class="glyphicon glyphicon-chevron-left"></span>
      <span class="sr-only">Previous</span>
    </a>
    <a class="right carousel-control" href="#myCarousel" data-slide="next">
      <span class="glyphicon glyphicon-chevron-right"></span>
      <span class="sr-only">Next</span>
    </a>
  </div>
</div>

Fonte que ajudou: https://codepen.io/transportedman/pen/NPWRGq

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 .