How to change the bootstrap slide default effect to Fade?

Asked

Viewed 1,105 times

1

Hello, I managed to put the Bootstrap 3 Carousel normal equal shows in the documentation, but I’m having difficulty to put the Fade effect, someone has some solution to do? 

<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>

I am using version 3. The style settings is the same as the bootstrap.

css twitter-bootstrap bootstrap-3 slide fadein
  • 1

    Which version of Bootstrap you are using 3 or 4? Take advantage and edit your question by placing the code you already have ready and the css you used.

  • I’ve already done the editing by entering the code and I’m using version 3.

1 answer

1

Ismael follows a version with the Fade making the transition between one and the other and not the horizontal scrolling as the standard.

I’ve left a few comments on the CSS that might help you control the altura to largura and the posição of the images inside Carousel

See how it looked in the example.

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>

Source who helped: https://codepen.io/transportedman/pen/NPWRGq

Browser other questions tagged css twitter-bootstrap bootstrap-3 slide fadein

You are not signed in. Login or sign up in order to post.