How to change the default effect of the bootstrap slide to Fade?

Question

How to change the default effect of the bootstrap slide to Fade?

Navigation

#1 by (1 votes)

1

Hello, I was able to put the normal Bootstrap 3 carousel as shown in the documentation, however I'm having a hard time putting on the Fade effect, does anyone have a 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'm using version 3. The style settings are the same as the bootstrap.

bootstrap slide fadein

asked by anonymous 21.04.2018 / 08:09

1 answer

Error in post registration with empty text How to activate event by clicking anywhere on the screen?

score 1 · Answer 1

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

I left some comments in the CSS that can help you control the% of% to altura and% of% of images within the Carousel

See how it went 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><scriptsrc="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 that helped: link