带中间图片放大效果的客户评价轮播功能实现求助

核心调整逻辑：将原本分离的文本内容与图片整合到同一轮播项内，确保滑动切换时内容完全同步，同时调整布局实现标题、图片、描述的垂直居中排列。

1. 调整后的HTML代码 #

<div class="carousel slide" data-ride="carousel" id="quote-carousel" data-interval="3000">
    <!-- Carousel Slides / Quotes -->
    <div class="carousel-inner text-center">
        <!-- 评价1 -->
        <div class="item active">
            <!-- 标题：图片上方 -->
            <h4 class="testimonial-title">Heading | <span class="testimonial-country">Sub Heading</span></h4>
            <!-- 评价人图片 -->
            <img class="testimonial-avatar img-responsive" src="images/testimonial/testimonial-1.jpg" alt="评价人头像">
            <!-- 描述：图片下方 -->
            <blockquote>
                <div class="row">
                    <div class="col-sm-8 col-sm-offset-2">
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                    </div>
                </div>
            </blockquote>
        </div>
        <!-- 评价2 -->
        <div class="item">
            <h4 class="testimonial-title">Heading | <span class="testimonial-country">Sub Heading</span></h4>
            <img class="testimonial-avatar img-responsive" src="images/testimonial/testimonial-2.jpg" alt="评价人头像">
            <blockquote>
                <div class="row">
                    <div class="col-sm-8 col-sm-offset-2">
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                    </div>
                </div>
            </blockquote>
        </div>
        <!-- 剩余3个评价项按以上结构依次补充即可 -->
    </div>
    <!-- 底部缩略图指示器（可按需保留/删除） -->
    <div class="testimonial-bg"></div>
    <ol class="carousel-indicators">
        <li data-target="#quote-carousel" data-slide-to="0" class="active"><img class="img-responsive" src="images/testimonial/testimonial-1.jpg" alt=""></li>
        <li data-target="#quote-carousel" data-slide-to="1"><img class="img-responsive" src="images/testimonial/testimonial-2.jpg" alt=""></li>
        <li data-target="#quote-carousel" data-slide-to="2"><img class="img-responsive" src="images/testimonial/testimonial-3.jpg" alt=""></li>
        <li data-target="#quote-carousel" data-slide-to="3"><img class="img-responsive" src="images/testimonial/testimonial-4.jpg" alt=""></li>
        <li data-target="#quote-carousel" data-slide-to="4"><img class="img-responsive" src="images/testimonial/testimonial-5.jpg" alt=""></li>
    </ol>
    <!-- 左右切换按钮 -->
    <a data-slide="prev" href="#quote-carousel" class="left carousel-control"><i class="fa fa-chevron-left"></i></a>
    <a data-slide="next" href="#quote-carousel" class="right carousel-control"><i class="fa fa-chevron-right"></i></a>
</div>

2. 调整后的CSS代码 #

#quote-carousel {
    padding: 0 10px 30px 10px;
    margin-top: 60px;
}
#quote-carousel .carousel-control {
    background: none;
    color: #ffc20e;
    font-size: 1.5em;
    text-shadow: none;
    margin-top: 30px;
}
#quote-carousel .carousel-indicators {
    position: relative;
    left: 30%;
    top: auto;
    bottom: 0px;
    z-index: 0;
    width: 100%;
}
#quote-carousel .carousel-indicators li {
    width: 100px;
    height:70px;
    cursor: pointer;
    opacity: 0.4;
    overflow: hidden;
}
#quote-carousel .carousel-indicators .active {
    width: 200px;
    height: 128px;
    opacity: 1;
}
/* 新增标题样式 */
.testimonial-title {
    color:#007176;
    font-size:17px;
    font-weight: 600;
    margin-bottom: 20px;
    text-align: center;
}
/* 新增头像图片样式 */
.testimonial-avatar {
    width: 200px;
    height: 128px;
    margin: 0 auto 20px;
    object-fit: cover;
}
.testimonial-country{
    color:#ffc20e
}
.testimonial-bg{
    background: #ffecc1;
    height: 170px;
    width: 250px;
    position: absolute;
    left: 39%;
    top: 12%; /* 调整背景块位置适配新布局 */
}
.item blockquote {
    border-left: none;
    margin: 0;
    background-color: white;
}
.item blockquote p:before {
    content: "\f10d";
    font-family: 'Fontawesome';
    float: left;
    margin-right: 10px;
}
.item blockquote p {
    font-family: "Open Sans";
    font-size: 18px;
    color:#007176;
    text-align: left;
}
blockquote .small:before, blockquote footer:before, blockquote small:before{
    content:none;
}
.carousel-indicators li{
    border:0px;
}

效果说明 #

• 每个轮播项内按「标题→图片→描述」垂直排列，所有内容居中显示
• 切换轮播时三类内容完全同步滑动
• 保留原有自动轮播、左右箭头切换、底部缩略图点击切换的功能
• 可根据设计需求直接调整标题字号、图片尺寸、间距等参数

内容的提问来源于stack exchange，提问作者SandyS