Jquery Slide Animation在滑动时改变高度

Question

我正在尝试构建一个简单的滑块。您单击左，图像向左滑动。你点右键，图片向右滑动。

我已经做到了。它工作得很好，有一个小问题。很难描述这个问题，所以我会给你一个小提琴。我会在这里打印所有代码，但它太多了。

$(function () {
    $("#oe-slide-left").on('click', function () {
        SlideLeft();
    });

    $("#oe-slide-right").on('click', function () {
        SlideRight();
    });
});

function SlideLeft() {
    var countLeft = $('#oe-testemonials').find('.oe-testemonial:visible').each(function () { }).length;
    var countRight = $('#oe-testemonials').find('.oe-testemonial:hidden').each(function () { }).length;

    if (countLeft > 3) {
        $("#oe-testemonials div.oe-testemonial:visible").first().animate({ width: 'toggle' }, 350);
    }

    if (countLeft === 4) {
        $("#oe-slide-left").hide();
    }

    if (countRight === 0) {
        $("#oe-slide-right").show();
    }
}

function SlideRight() {
    var countLeft = $('#oe-testemonials').find('.oe-testemonial:visible').each(function () { }).length;
    var countRight = $('#oe-testemonials').find('.oe-testemonial:hidden').each(function () { }).length;

    if (countRight > 0) {
        $("#oe-testemonials div.oe-testemonial:hidden").last().animate({ width: 'toggle' }, 350);
    }

    if (countRight <= 1) {
        $("#oe-slide-right").hide();
    }

    if (countLeft === 3)
    {
        $("#oe-slide-left").show();
    }
}

.oe-testemonials {
        margin-top: 40px;
        width: 100%;
        overflow: hidden;
        white-space: nowrap;
        position: relative;

        .slider-left-arrow, .slider-right-arrow {
            position: absolute;
            z-index: 1000;
            top: 50%;
            transform: translateY(-50%);
            cursor: pointer;

            &:hover {
                background: #efe5e5;
                opacity: 0.8;
            }
        }

        .slider-left-arrow {
            left: 15px;
        }

        .slider-right-arrow {
            right: 15px;
        }

        .oe-testemonial {
            width: 33%;
            display: inline-block;
            margin: auto;
            white-space: normal;

            .image-wrapper {
                width: 100px;
                height: 100px;
                position: relative;
                overflow: hidden;
                border-radius: 50%;
                margin: auto;

                img {
                    display: inline;
                    margin: 0 auto;
                    height: 100%;
                    width: auto;
                }
            }

            .description, .name, .title, .location {
                width: 90%;
                max-width: 300px;
                text-align: center;
                margin: auto;
            }

            .description {
                border-bottom: 1px solid #999;
                padding-bottom: 5px;
                margin-bottom: 5px;
                color: #413880;
            }

            .name {
                font-family: 'Just Another Hand', cursive;
                font-size: 24px;
            }

            .location {
                color: #B3B3B3;
            }
        }
}

.description{
  width: 100px !important;
}

<div id="oe-testemonials" class="oe-testemonials">
        <img id="oe-slide-left" src="/Images/left_arrow.png" alt="Click To Slide Left" class="slider-left-arrow">
        <img id="oe-slide-right" src="/Images/right_arrow.png" alt="Click To Slide Right" class="slider-right-arrow" style="display: none;">
    <div class="oe-testemonial" style="display: inline-block;"><div class="image-wrapper"><img src="/Images/people/Erin_Hartigan-6947_sm.jpg" alt="Portfolio Image"></div><div class="description"><span>I think that OrthoEvidence is wonderful. It’s great that there are new avenues for people to learn about the evidence and have it summarized, which allows for a more transparent transfer of research to both practitioners and patients.</span></div><div class="name"><span>Dr. Erin Hartigan</span></div><div class="title"><span>Assistant Professor of Physical Therapy</span></div><div class="location"><span>University of New England</span></div></div><div class="oe-testemonial"><div class="image-wrapper"><img src="/Images/people/HiteshGopalan.jpg" alt="Portfolio Image"></div><div class="description"><span>As an Editor of a book and an associated website, I have been following 20- 30 journals every month. But now I have shifted my primary focus to OrthoEvidence where I get all quality information in one place.</span></div><div class="name"><span>Dr. Hitesh Gopalan</span></div><div class="title"><span>Editor</span></div><div class="location"><span>orthopaedicprinciples.com</span></div></div><div class="oe-testemonial"><div class="image-wrapper"><img src="/Images/people/DavidGryfe_sm.jpg" alt="Portfolio Image"></div><div class="description"><span>OrthoEvidence raises the bar on timely and relevant reviews of the medical literature. This is an indispensible service for every practitioner who strives to stay current.</span></div><div class="name"><span>Dr. David Gryfe</span></div><div class="title"><span>Chiropractor</span></div><div class="location"><span>Chiropractic Sports Specialist</span></div></div><div class="oe-testemonial"><div class="image-wrapper"><img src="/Images/people/AaronKrych_sm.jpg" alt="Portfolio Image"></div><div class="description"><span>OrthoEvidence allows the busy practicing surgeon, in a short period of time, to stay up to date with what is important with the changes in the literature.</span></div><div class="name"><span>Dr. Aaron Krych</span></div><div class="title"><span>Orthopaedic Surgeon</span></div><div class="location"><span>Mayo Clinic</span></div></div><div class="oe-testemonial"><div class="image-wrapper"><img src="/Images/people/JonathanRonquillo_sm.jpg" alt="Portfolio Image"></div><div class="description"><span>OrthoEvidence has made me more critical of available papers. It has made me look back at certain existing protocols...to improve existing practice.</span></div><div class="name"><span>Dr. Jonathan Ronquillo</span></div><div class="title"><span>Orthopaedic Surgeon</span></div><div class="location"><span>Asian Hospital and Medical Center</span></div></div><div class="oe-testemonial"><div class="image-wrapper"><img src="/Images/people/FrankSmith_sm.jpg" alt="Portfolio Image"></div><div class="description"><span>OrthoEvidence is the flag ship for enabling us to keep current whilst still working 60 hour weeks.</span></div><div class="name"><span>Dr. Frank Smith</span></div><div class="title"><span>Orthopaedic Surgeon</span></div><div class="location"><span>McMaster University</span></div></div><div class="oe-testemonial"><div class="image-wrapper"><img src="/Images/people/MarcosBritto_sm.jpg" alt="Portfolio Image"></div><div class="description"><span>OE is medical information of unparalleled quality, with papers revised, and a newsletter available in my inbox. It is the fastest and easiest way to stay updated on Orthopedics.</span></div><div class="name"><span>Dr. Marcos Britto da Silva</span></div><div class="title"><span>Orthopaedic Surgeon</span></div><div class="location"><span>Federal University of Rio de Janeiro</span></div></div></div>

请看这个：https://jsfiddle.net/wq96vbd5/

您会注意到，当您单击“单击以向左滑动”时，滑块确实向左滑动，但文本变得超长并且动画看起来很糟糕。

Answer 1

最好和最简单的方法是使用插件，我推荐slick slider，因为它是免费的、易于学习的并且拥有一个庞大的社区

为此，您需要 jquery，从 slick 页面下载 js 和 css 文件，然后开始使用

Here is your example with the plugin in jsfiddle

HTML

<div id="oe-testemonials" class="oe-testemonials">
   <div id="oe-slide">
     <div class="oe-testemonial" style="display: inline-block;">
        <div class="image-wrapper"><img src="/Images/people/Erin_Hartigan-6947_sm.jpg" alt="Portfolio Image"></div>
        <div class="description"><span>I think that OrthoEvidence is wonderful. It’s great that there are new avenues for people to learn about the evidence and have it summarized, which allows for a more transparent transfer of research to both practitioners and patients.</span></div>
        <div class="name"><span>Dr. Erin Hartigan</span></div>
        <div class="title"><span>Assistant Professor of Physical Therapy</span></div>
        <div class="location"><span>University of New England</span></div>
     </div>
     <div class="oe-testemonial">
        <div class="image-wrapper"><img src="/Images/people/HiteshGopalan.jpg" alt="Portfolio Image"></div>
        <div class="description"><span>As an Editor of a book and an associated website, I have been following 20- 30 journals every month. But now I have shifted my primary focus to OrthoEvidence where I get all quality information in one place.</span></div>
        <div class="name"><span>Dr. Hitesh Gopalan</span></div>
        <div class="title"><span>Editor</span></div>
        <div class="location"><span>orthopaedicprinciples.com</span></div>
     </div>
     <div class="oe-testemonial">
        <div class="image-wrapper"><img src="/Images/people/DavidGryfe_sm.jpg" alt="Portfolio Image"></div>
        <div class="description"><span>OrthoEvidence raises the bar on timely and relevant reviews of the medical literature. This is an indispensible service for every practitioner who strives to stay current.</span></div>
        <div class="name"><span>Dr. David Gryfe</span></div>
        <div class="title"><span>Chiropractor</span></div>
        <div class="location"><span>Chiropractic Sports Specialist</span></div>
     </div>
     <div class="oe-testemonial">
        <div class="image-wrapper"><img src="/Images/people/AaronKrych_sm.jpg" alt="Portfolio Image"></div>
        <div class="description"><span>OrthoEvidence allows the busy practicing surgeon, in a short period of time, to stay up to date with what is important with the changes in the literature.</span></div>
        <div class="name"><span>Dr. Aaron Krych</span></div>
        <div class="title"><span>Orthopaedic Surgeon</span></div>
        <div class="location"><span>Mayo Clinic</span></div>
     </div>
     <div class="oe-testemonial">
        <div class="image-wrapper"><img src="/Images/people/JonathanRonquillo_sm.jpg" alt="Portfolio Image"></div>
        <div class="description"><span>OrthoEvidence has made me more critical of available papers. It has made me look back at certain existing protocols...to improve existing practice.</span></div>
        <div class="name"><span>Dr. Jonathan Ronquillo</span></div>
        <div class="title"><span>Orthopaedic Surgeon</span></div>
        <div class="location"><span>Asian Hospital and Medical Center</span></div>
     </div>
     <div class="oe-testemonial">
        <div class="image-wrapper"><img src="/Images/people/FrankSmith_sm.jpg" alt="Portfolio Image"></div>
        <div class="description"><span>OrthoEvidence is the flag ship for enabling us to keep current whilst still working 60 hour weeks.</span></div>
        <div class="name"><span>Dr. Frank Smith</span></div>
        <div class="title"><span>Orthopaedic Surgeon</span></div>
        <div class="location"><span>McMaster University</span></div>
     </div>
     <div class="oe-testemonial">
        <div class="image-wrapper"><img src="/Images/people/MarcosBritto_sm.jpg" alt="Portfolio Image"></div>
        <div class="description"><span>OE is medical information of unparalleled quality, with papers revised, and a newsletter available in my inbox. It is the fastest and easiest way to stay updated on Orthopedics.</span></div>
        <div class="name"><span>Dr. Marcos Britto da Silva</span></div>
        <div class="title"><span>Orthopaedic Surgeon</span></div>
        <div class="location"><span>Federal University of Rio de Janeiro</span></div>
     </div>
   </div>
</div>

Javascript

$(document).ready(function(){
    $('#oe-slide').slick({
    slidesToShow: 3,
    prevArrow: "<img id='oe-slide-left' src='/Images/left_arrow.png' alt='Click To Slide Left' class='slider-left-arrow'>",
    nextArrow: "<img id='oe-slide-right' src='/Images/right_arrow.png' alt='Click To Slide Right' class='slider-right-arrow' style='display: none'>"
  });
});

CSS 一样的