jquery - Owl Carousel 切割div

Question

我有个小问题。我使用 OwlCarousel 2 制作“推荐旋转器/ slider ”，但它看起来像这样:

但我需要这样的思考 - 图像被剪切在顶部:

我在另一个 div 中打包了'box'，但它并没有修复它。
这是我的 HTML:

<div>
    <div class="testimonial-box">
        <div class="testimonial-content">
            <div class="testimonial-logo">
                <img src="http://placehold.it/100x100" alt="" class="img-responsive img-thumbnail pull-left" />
            </div>
            <p>
                <!-- CONTENT -->
            </p>
            <div class="testimonial-meta">
                <p>
                    <h5>Lorem Ipsum</h5>
                    <span>, <i>Web Developer</i></span>
                </p>
                <p class="website">
                    <a href="http://vrs-factory.pl">VRS-Factory</a>
                </p>
            </div>
        </div>
    </div>
</div>

和 CSS [SASS]:

section.testimonials {
        padding: 30px 0;

        .testimonial-logo {
            img {
                margin-top: -88px;
            }
        }

        .testimonial-content {
            border: 1px solid rgba( $SecondColor, .2 );
            border-radius: 3px;
            padding: 20px;
        }

        .testimonial-meta {
            h5 {
                display: inline-block;
                margin-bottom: 0;
            }
        }

        .owl-carousel {
            .owl-item {
                img {
                    width: auto;
                }
            }
        }
    }

更新:这是演示:DEMO

Answer 1

这是因为.owl-carousel .owl-stage-outer的overflow: hidden。

我在 .owl-item 上添加了一个 margin-top 来修复它。

.owl-item { margin-top: 70px; }

Live example