滑块的高度根据背景中的文本而变化,我们如何才能使用CSS或jquery添加过渡或动画效果,以使它不会在实例中发生,并且在这种情况下看起来并不奇怪。
我尝试了hasClass,然后尝试了fadein,但没有成功。

这是jsfiddle代码
https://jsfiddle.net/39amxqjd/30

<div class="testimonial-section">
    <div class="paralax-overlay">
    </div>
    <div class="testimonial-content">
        <div class="container">
            <div class="row wow">
                <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 wow fadeInDown delay-07s">
                    <div class="section-title">
                        <h3>

                            <span>

                            </span>
                        </h3>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-md-push-2 col-md-8 wow fadeInUp delay-07s">
                    <div class="carousel slide" data-ride="carousel" id="indecator">
                        <ol class="carousel-indicators">
                            <li class="active" data-slide-to="0" data-target="#indecator">
                            </li>
                            <li class="" data-slide-to="1" data-target="#indecator">
                            </li>
                            <li class="" data-slide-to="2" data-target="#indecator">
                            </li>
                        </ol>
                        <div class="carousel-inner full_display" role="listbox">
                            <div class="item sngl-testimonial active">
                                <div class="sngle-tsmt">
                                    <div class="client-dsc">
                                        <h3 style="color: #fff;">dsfdsf</h3>
                                        <p style="font-size: 19px;">
                                             fsdfdsfsd fsdfdsfsd fsdfdsfsd fsdfdsfsd fsdfdsfsd fsdfdsfsd fsdfdsfsd fsdfdsfsd fsdfdsfsd fsdfdsfsd fsdfdsfsd fsdfdsfsd fsdfdsfsd fsdfdsfsd fsdfdsfsd fsdfdsfsd fsdfdsfsd fsdfdsfsd fsdfdsfsd fsdfdsfsd fsdfdsfsd fsdfdsfsd fsdfdsfsd fsdfdsfsd fsdfdsfsd fsdfdsfsd fsdfdsfsd fsdfdsfsd fsdfdsfsd fsdfdsfsd fsdfdsfsd fsdfdsfsd fsdfdsfsd fsdfdsfsd fsdfdsfsd fsdfdsfsd fsdfdsfsd fsdfdsfsd fsdfdsfsd fsdfdsfsd fsdfdsfsd fsdfdsfsd fsdfdsfsd

                                        </p>
                                    </div>

                                </div>
                            </div>
                            <div class="item sngl-testimonial">
                                <div class="sngle-tsmt">
                                    <div class="client-dsc">
                                         <br><br><br>
                                        <h3 style="color: #fff; font-size: 26px;">sfdsdfds</h3>

                                        <p style="font-size: 19px;">
                                            fsdfdsfsd fsdfdsfsd fsdfdsfsd fsdfdsfsd fsdfdsfsd fsdfdsfsd fsdfdsfsd fsdfdsfsd
                                        </p>
                                    </div>

                                </div>
                            </div>
                            <div class="item sngl-testimonial">
                                <div class="sngle-tsmt">
                                    <div class="client-dsc">
                                        <h3 style="color: #fff; font-size: 26px;">sdfsfsd</h3>
                                        <p style="font-size: 19px;">
                                            fsdfdsfsd fsdfdsfsd fsdfdsfsd fsdfdsfsd fsdfdsfsd fsdfdsfsd fsdfdsfsd fsdfdsfsd fsdfdsfsd fsdfdsfsd fsdfdsfsd fsdfdsfsd fsdfdsfsd fsdfdsfsd fsdfdsfsd fsdfdsfsd fsdfdsfsd fsdfdsfsd fsdfdsfsd fsdfdsfsd fsdfdsfsd fsdfdsfsd fsdfdsfsd fsdfdsfsd fsdfdsfsd fsdfdsfsd
                                        </p>
                                    </div>

                                </div>
                            </div>
                        </div>
                        <a class="left left_twit_crousel_btn" data-slide="prev" href="#indecator" role="button">
                            <i class="fa fa-angle-left">
                            </i>
                            <span class="sr-only">
                                Previous
                            </span>
                        </a>
                        <a class="right right_twit_crousel_btn" data-slide="next" href="#indecator" role="button">
                            <i class="fa fa-angle-right">
                            </i>
                            <span class="sr-only">
                                Next
                            </span>
                        </a>
                    </div>
                </div>
                <div class="col-lg-2">
                </div>
            </div>
        </div>
    </div>
</div>
<div class="clearfix">
</div>
<script

最佳答案

您是否尝试过这样做?



$(document).ready(function(){
     var height=$('#s1').height()+20;
     $(".carousel-inner").css("height", height);  //initial heigth
 });


$('.carousel').on('slide.bs.carousel', function (e) {
   var height=$($(e.relatedTarget).height());
   $(".carousel-inner").css("height", height[0]);
});

.title{
  text-align:center;
}

.carousel-inner{
    height: 0;
    transition: height 800ms cubic-bezier(0.42, 0, 0.26, 1.38);
}

.para{
  text-align:center;
  font-size:15px;
   padding-left:8.5em;
   padding-right:8.5em;
}

.glyphicon-chevron-right:before{
    background-color: #85238A;
    padding: .3rem 0.75rem;
}

.glyphicon-chevron-left:before{
    background-color: #85238A;
    padding: .3rem 0.75rem;
}

.carousel-control.right{
      background-image: -webkit-linear-gradient(left,rgba(0,0,0,0) 0,rgba(0,0,0,.0) 100%);
     opacity: 1;
}

.carousel-control.left{
      background-image: linear-gradient(to right,rgba(0,0,0,0) 0,rgba(0,0,0,0) 100%);
      opacity: 1;
}

.carousel-inner{
   color:white;
   background-image: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5));
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
    <li data-target="#carousel-example-generic" data-slide-to="1"></li>
    <li data-target="#carousel-example-generic" data-slide-to="2"></li>
  </ol>

  <!-- Wrapper for slides -->
  <div class="carousel-inner" role="listbox">
    <div id="s1" class="item active">
       <h3 class="title">Title</h3>
       <p class="para">
                                             fsdfdsfsd fsdfdsfsd fsdfdsfsd fsdfdsfsd fsdfdsfsd fsdfdsfsd fsdfdsfsd fsdfdsfsd fsdfdsfsd fsdfdsfsd fsdfdsfsd fsdfdsfsd fsdfdsfsd fsdfdsfsd fsdfdsfsd fsdfdsfsd fsdfdsfsd fsdfdsfsd fsdfdsfsd fsdfdsfsd fsdfdsfsd fsdfdsfsd fsdfdsfsd fsdfdsfsd fsdfdsfsd fsdfdsfsd fsdfdsfsd fsdfdsfsd fsdfdsfsd fsdfdsfsd fsdfdsfsd fsdfdsfsd fsdfdsfsd fsdfdsfsd fsdfdsfsd fsdfdsfsd fsdfdsfsd fsdfdsfsd fsdfdsfsd fsdfdsfsd fsdfdsfsd fsdfdsfsd end

                                        </p>
    </div>
    <div id="s2" class="item">
       <h3 class="title">Title</h3>
      <p class="para">
                                             fsdfdsfsd fsdfdsfsd fsdfdsfsd fsdfdsfsd fsdfdsfsd fsdfdsfsd fsdfdsfsd fsdfdsfsd fsdfdsfsd fsdfdsfsd fsdfdsfsd fsdfdsfsd fsdfdsfsd fsdfdsfsd fsdfdsfsd fsdfdsfsd fsdfdsfsd fsdfdsfsd fsdfdsfsd fsdfdsfsd fsdfdsfsd fsdfdsfsd fsdfdsfsd fsdfdsfsd fsdfdsfsd fsdfdsfsd fsdfdsfsd end
                                        </p>
    </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://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>





My Codepen Example here

10-08 13:38
查看更多