CODEWITHSUNDEEP
csstwitter-bootstrapcarouselbootstrap-4
Dale Nguyen
Dale Nguyen

Reputation: 1980

Bootstrap carousel transition effect doesn't work

I used fade transition for my bootstrap 4 carousel transition. However, the effect doesn't appear on the carousel.

HTML code: 

<div id="testimonialsSlides" class="carousel carousel-fade" data-ride="false" data-interval="5000">
    <div class="carousel-inner" role="listbox">                                            <div class="carousel-item">
                <div class="study-text">
                    <p>“This is test 1”</p>
                </div>      
                <div class="clearfix"></div>
            </div>
        <div class="carousel-item">
            <div class="study-text">
                <p>“This is test 2”</p>   
            </div>

            <div class="clearfix"></div>
        </div>
        <div class="carousel-item active">
            <div class="study-text">
                <p>“This is test 3”</p>
            </div>
            <div class="clearfix"></div>
        </div>
                                                                                    </div>

    <div class="arrows-wrap">
        <a class="prev" href="#testimonialsSlides" role="button" data-slide="prev">
            <i class="fa fa-angle-left" aria-hidden="true"></i>
            <span class="sr-only">Previous</span>
        </a>
        <a class="next" href="#testimonialsSlides" role="button" data-slide="next">
            <i class="fa fa-angle-right" aria-hidden="true"></i>
            <span class="sr-only">Next</span>
        </a>
    </div>
</div>

CSS code:

.carousel-fade .carousel-item {
  opacity: 0;
  transition: opacity .75s ease-in-out;
}
.carousel-fade .carousel-item.active {
  opacity: 1;
}

I am not sure what happened to the fading transition. Do you have any idea about this?

Please take a look the demo: http://jsfiddle.net/yv80533m/23

Upvotes: 1

Views: 1689

Answers (1)

Dale Nguyen
Dale Nguyen

Reputation: 1980

I found a solution for this. Turns out, there is an issue with the position. I changed the position to absolute, except for the first element then all the transition effect works.

SCSS code: 

.carousel-fade {
  .carousel-item{
    opacity: 0;
    top: 0;
    left: 0;
    width: 100%;
    display: block;
    position: absolute;
    transition: opacity .75s ease-in-out;
    &:first-of-type {
      position:relative;
    }           
        &.active {
            opacity: 1;
        }
  }
}

You can check the demo here: http://jsfiddle.net/yv80533m/29/

Upvotes: 1

Related Questions