Question

滑块的高度根据背景中的文本而变化，我们如何才能使用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

Answer 1

您尝试这样做吗？

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

文本滑块轮播高度转换？

1 个答案: