更改活动幻灯片的宽度时，滑动轮播跳转

Question

请参阅小提琴：http://jsfiddle.net/br24p3Lr/

我正在尝试更改为新的活动幻灯片时动画正确。我已经尝试了不同的方法来修复这个动画，但我现在已经死在了水中。

HTML：

    <section class="ringenslider-wrapper">
    <div class="container">

        <div class="row">

            <div class="col-xs-12">
                <h2><?php _e('Popular models'); ?></h2>
            </div>

        </div>

    </div>  

    <ul class="ringenslider">

        <li class="product-slide">

            <div class="product-slide-wrap">

                <div class="product-image">

                    <img src="https://i.imgur.com/hyEkF58.png" alt="" />                
                </div>

                <div class="product-info">
                    <h3>Steinberg Ring 1</h3>
                    <div class="prijs">
                        €499
                    </div>
                    <p>
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.
                    </p>

                    <div class="button-slider-wrap">
                        <a class="button-slider" href="#">
                            Nu bestellen
                        </a>
                    </div>

                </div>

            </div>

        </li>

        <li class="product-slide">

            <div class="product-slide-wrap">

                <div class="product-image">

                    <img src="https://i.imgur.com/hyEkF58.png" alt="" />

                </div>

                <div class="product-info">
                    <h3>Steinberg Ring 1</h3>
                    <div class="prijs">
                        €499
                    </div>
                    <p>
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.
                    </p>

                    <div class="button-slider-wrap">
                        <a class="button-slider" href="#">
                            Nu bestellen
                        </a>
                    </div>

                </div>

            </div>

        </li>
        <li class="product-slide">

            <div class="product-slide-wrap">

                <div class="product-image">

                    <img src="https://i.imgur.com/hyEkF58.png" alt="" />

                </div>

                <div class="product-info">
                    <h3>Steinberg Ring 1</h3>
                    <div class="prijs">
                        €499
                    </div>
                    <p>
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.
                    </p>

                    <div class="button-slider-wrap">
                        <a class="button-slider" href="#">
                            Nu bestellen
                        </a>
                    </div>

                </div>

            </div>

        </li>
        <li class="product-slide">

            <div class="product-slide-wrap">

                <div class="product-image">

                    <img src="https://i.imgur.com/hyEkF58.png" alt="" />

                </div>

                <div class="product-info">
                    <h3>Steinberg Ring 1</h3>
                    <div class="prijs">
                        €499
                    </div>
                    <p>
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.
                    </p>

                    <div class="button-slider-wrap">
                        <a class="button-slider" href="#">
                            Nu bestellen
                        </a>
                    </div>

                </div>

            </div>

        </li>
        <li class="product-slide">

            <div class="product-slide-wrap">

                <div class="product-image">

                    <img src="https://i.imgur.com/hyEkF58.png" alt="" />

                </div>

                <div class="product-info">
                    <h3>Steinberg Ring 1</h3>
                    <div class="prijs">
                        €499
                    </div>
                    <p>
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.
                    </p>

                    <div class="button-slider-wrap">
                        <a class="button-slider" href="#">
                            Nu bestellen
                        </a>
                    </div>

                </div>

            </div>

        </li>
        <li class="product-slide">

            <div class="product-slide-wrap">

                <div class="product-image">

                    <img src="https://i.imgur.com/hyEkF58.png" alt="" />

                </div>

                <div class="product-info">
                    <h3>Steinberg Ring 1</h3>
                    <div class="prijs">
                        €499
                    </div>
                    <p>
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.
                    </p>

                    <div class="button-slider-wrap">
                        <a class="button-slider" href="#">
                            Nu bestellen
                        </a>
                    </div>

                </div>

            </div>

        </li>
        <li class="product-slide">

            <div class="product-slide-wrap">

                <div class="product-image">

                    <img src="https://i.imgur.com/hyEkF58.png" alt="" />

                </div>

                <div class="product-info">
                    <h3>Steinberg Ring 1</h3>
                    <div class="prijs">
                        €499
                    </div>
                    <p>
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.
                    </p>

                    <div class="button-slider-wrap">
                        <a class="button-slider" href="#">
                            Nu bestellen
                        </a>
                    </div>

                </div>

            </div>

        </li>

    </ul>


</section>

JS：

(function ($) {

    "use strict";


    $(document).ready(function() {

  //Ringenslider
         $('.ringenslider').slick({
            infinite: false,
            slidesToShow: 1,
            draggable: false,
            centerMode:false,
            swipe: false,
            dots:false,
            fade:false,
            speed:745,
            cssEase: 'ease',
            useTransform: true,
            nextArrow: '<a class="slide-next">Volgende <i class="fa fa-angle-right" aria-hidden="true"></i></a>',
            prevArrow: '<a class="slide-prev"><i class="fa fa-angle-left" aria-hidden="true"></i> Vorige</a>',
            variableWidth: true,
            responsive: [{
                        breakpoint: 1200
                        , settings: {
                            slidesToShow: 3
                        }
                    }, {
                        breakpoint: 992
                        , settings: {
                            slidesToShow: 2
                        }
                    }, {
                        breakpoint: 768
                        , settings: {
                            speed: 250
                            , arrows: !1
                            , swipe: !0
                            , centerMode: !0
                            , slidesToShow: 1
                        }
                    }]

        });
    });
}(jQuery));

CSS：

    /* Ringenslider Wrapper */
.ringenslider-wrapper {
    position:relative;
    float:left;
    width:100%;
    padding:0 0 80px 0;
}

.ringenslider-wrapper h2 {
    position:relative;
    float:left;
    width:100%;
    height:72px;
    line-height:72px;
    text-align:center;
    background-image:url('../images/ring-titel-bg.png');
    background-repeat:no-repeat;
    background-position:center center;

}

.ringenslider-wrapper h2::before {
    position:absolute;
    left:0px;
    content:'';
    width:300px;
    top:50%;
    height:1px;
    background-color:#cae1ef;
}
.ringenslider-wrapper h2::after {
    position:absolute;
    right:0px;
    content:'';
    width:300px;
    top:50%;
    height:1px;
    background-color:#cae1ef;
}



@media(max-width:767px){
    .ringenslider-wrapper h2::after {
        display:none;
    }
    .ringenslider-wrapper h2::before {
        display:none;
    }
}

@media(min-width:768px){
    .ringenslider-wrapper h2::after {
        right:-120px;
    }
    .ringenslider-wrapper h2::before {
        left:-120px;
    }
}

@media(min-width:992px){
    .ringenslider-wrapper h2::after {
        right:-30px;
    }
    .ringenslider-wrapper h2::before {
        left:-30px;
    }   
}

@media(min-width:1200px){
    .ringenslider-wrapper h2::after {
        right:0px;
    }
    .ringenslider-wrapper h2::before {
        left:0px;
    }   
}




/* RINGENSLIDER */
.ringenslider {
    position: relative;
    display: block;
    float:left;
    width:100%;
    margin:0 0 0 0;
    box-sizing: border-box;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -ms-touch-action: pan-y;
    touch-action: pan-y;
    -webkit-tap-highlight-color: transparent;
}

.ringenslider .slick-slider {
    position: relative;
    display: block;
    box-sizing: border-box;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -ms-touch-action: pan-y;
    touch-action: pan-y;
    -webkit-tap-highlight-color: transparent;
}

.ringenslider .slick-track {
    position:relative;
    float:left;
    width:100%;
    padding:0 ;

}

.ringenslider li {
    min-height:1px;
    width: 318px;
    height: 279px !important;
    list-style-type:none;
    position:relative;
    float:left;
    -webkit-transition: all 750ms ease;
    -moz-transition: all 750ms ease;
    -ms-transition: all 750ms ease;
    -o-transition: all 750ms ease;
    transition: all 750ms ease;

    box-sizing: border-box; 

    outline:none;

    margin:20px 20px 20px 20px;

}

.product-slide-wrap {
    -webkit-transition: all .2s ease;
    transition: all .2s ease;
    width: 100%;
    position:relative;
    float:left;
}


.ringenslider li::before {
    content: '';
    width: 100%;
    height: 279px;
    border: 1px solid white;
    top: 50%;
    left: 0;
    -webkit-transform: translate3d(0, -50%, 0);
    -moz-transform: translate3d(0, -50%, 0);
    -o-transform: translate3d(0, -50%, 0);
    transform: translate3d(0, -50%, 0);
    position: absolute;
    z-index: -1;

    background: rgb(248,248,248); /* Old browsers */
    background: -moz-linear-gradient(top,  rgba(248,248,248,1) 0%, rgba(234,234,234,1) 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top,  rgba(248,248,248,1) 0%,rgba(234,234,234,1) 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom,  rgba(248,248,248,1) 0%,rgba(234,234,234,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f8f8f8', endColorstr='#eaeaea',GradientType=0 ); /* IE6-9 */

    -webkit-box-shadow: 0px 0px 19px 0px rgba(0, 0, 0, 0.06);
    -moz-box-shadow:    0px 0px 19px 0px rgba(0, 0, 0, 0.06);
    box-shadow:         0px 0px 19px 0px rgba(0, 0, 0, 0.06);
}

.ringenslider li h3 {
    font-size:22px;
    line-height:28px;
    margin:0 0 0px 0;
    color:#5689a8;
}

.ringenslider li .prijs {
    font-size:22px;
    line-height:28px;
    margin:0;
    color:#454444;
    font-family: 'Crimson Text', serif;
}


.ringenslider li .product-info {
    text-align: left;
    padding: 15px 13px 0;
    max-width: 440px;
    -webkit-transition: all 750ms;
    -moz-transition: all 750ms;
    -ms-transition: all 750ms;
    -o-transition: all 750ms;
    transition: all 750ms;
}


.ringenslider li .product-image {
    position: absolute;
    left: 0;
    top: 0;
}

.ringenslider li .product-image img {
    max-width: 138px;
    max-height: 212px;
    display: inline-block !important;
    transform: translate3d(160px, 60px, 0) scale(1);
    -webkit-transform: translate3d(160px, 60px, 0) scale(1);
    -webkit-transition: all 750ms;
    -moz-transition: all 750ms;
    -ms-transition: all 750ms;
    -o-transition: all 750ms;
    transition: all 750ms;
}

.ringenslider li p {
    color: #454444;
    font-size: 13px;
    line-height: 24px;
    margin: 0 0 10px 0;
    visibility: hidden;
    opacity: 0;
    -webkit-transition: all 750ms;
    -moz-transition: all 750ms;
    -ms-transition: all 750ms;
    -o-transition: all 750ms;
    transition: all 750ms;
}
.ringenslider li .button-slider-wrap {
    opacity: 0;
    visibility: hidden;
    -webkit-transition: all 750ms;
    -moz-transition: all 750ms;
    -ms-transition: all 750ms;
    -o-transition: all 750ms;
    transition: all 750ms;
}

/* RINGENSLIDER BUTTON */

.button-slider {
    position:relative;
    float:left;
    font-size:19px;
    line-height:19px;
    font-family: 'Crimson Text', serif;
    text-transform:uppercase;
    padding:15px 30px;
    font-weight:500;
    outline:none;
}

.button-slider:link {
    color:#5689a8;
    border: 2px solid #5689a8;
    text-decoration:none;
    outline:none;
}
.button-slider:visited {
    color:#5689a8;
    border: 2px solid #5689a8;
    text-decoration:none;
    outline:none;
}
.button-slider:hover {
    color:#fff;
    border: 2px solid #5689a8;
    background:#5689a8;
    text-decoration:none;
    outline:none;
}
.button-slider:active {
    color:#fff;
    border: 2px solid #5689a8;
    background:#5689a8;
    text-decoration:none;
    outline:none;
}




/* RINGENSLIDER ACTIVE */

.ringenslider li.slick-active .product-slide-wrap {
    -webkit-transform: translate(-70px, 0px);
    transform: translate(0px, 0px);
    width: calc(100% + 460px);
    max-width: initial;
} 

.ringenslider li.slick-active, .ringenslider li.slick-active  {
     width:778px;
}

.ringenslider li.slick-active img {  
    transform: translate3d(125px, 0px, 0) scale(1.2);
    -webkit-transform: translate3d(125px, 0px, 0) scale(1.2);
}

.ringenslider li.slick-active .product-info {
    -webkit-transform: translate3d(336px, 0, 0);
    -moz-transform: translate3d(336px, 0, 0);
    -o-transform: translate3d(336px, 0, 0);
    transform: translate3d(336px, 0, 0);
    -webkit-transition: all 500ms;
    -moz-transition: all 500ms;
    -ms-transition: all 500ms;
    -o-transition: all 500ms;
    transition: all 500ms;
}

.ringenslider li.slick-active h3 {
    font-size:26px;
    line-height:34px;
}

.ringenslider li.slick-active .prijs {
    font-size: 26px;
    line-height: 34px;
}

.ringenslider li.slick-active p {
    opacity: 1;
    visibility: visible;
    -webkit-transition-delay: 200ms;
    -moz-transition-delay: 200ms;
    -o-transition-delay: 200ms;
    transition-delay: 200ms;
}

.ringenslider li.slick-active .button-slider-wrap {
    opacity: 1;
    visibility: visible;
    -webkit-transition-delay: 200ms;
    -moz-transition-delay: 200ms;
    -o-transition-delay: 200ms;
    transition-delay: 200ms;
}

/* RINGSLIDER ARROWS */
.slick-disabled {
    opacity:0;
    visibility:hidden;
}


.slide-next, .slide-prev {
    visibility:visible;
    position: absolute;
    left: 180px;
    bottom: -30px;
    z-index: 100;
    text-transform: uppercase;
    font-size:17px;
    line-height:27px;
    font-weight:300;
    cursor: pointer;
    -webkit-transition: all 250ms;
    -moz-transition: all 250ms;
    -ms-transition: all 250ms;
    -o-transition: all 250ms;
    transition: all 250ms;
    font-family: 'Crimson Text', serif;
}

.slide-next i {
    position:relative;
    float:right;
    height:27px;
    width:27px;
    text-align:left;
    padding:0 10px;
    font-size:19px;
    line-height:25px;
    border-radius:50%;
    margin:0 0 0 10px;
    border:1px solid #5689a8;

    -webkit-transition: all 250ms;
    -moz-transition: all 250ms;
    -ms-transition: all 250ms;
    -o-transition: all 250ms;
    transition: all 250ms;
}

.slide-prev i {
    position:relative;
    float:left;
    height:27px;
    width:27px;
    text-align:left;
    padding:0 8px;
    font-size:19px;
    line-height:25px;
    border-radius:50%;
    margin:0 10px 0 0;
    border:1px solid #5689a8;

    -webkit-transition: all 0.2s ease-in;
    -moz-transition: all 0.2s ease-in;
    -ms-transition: all 0.2s ease-in;
    -o-transition: all 0.2s ease-in;
    transition: all 0.2s ease-in;
}

.slide-next {
    left: auto;
    right: 180px;
}
.slide-prev {

}
.slide-next:hover {
    text-decoration:none;
}
.slide-prev:hover {
    text-decoration:none;
}
.slide-next:hover i {
    background-color:#5689a8;
    color:#fff;
}
.slide-prev:hover i {
    background-color:#5689a8;
    color:#fff;
}

我尝试过不同的方法来解决这个问题，但动画一直在跳跃。

非常感谢帮助。

祝你好运， 迪伦·斯密特

Answer 1

是的，我在过去曾为客户制作的网站遇到过同样的问题。我也尝试了很多不同的滑块来实现同样的问题也出现在它们身上。问题是，Javavascript和jquery（如果你使用它），不支持很好的幻灯片更改。这对于一个滑块来说不是特定的。这会导致故障，跳跃和许多其他问题。我发现的解决方案是velocity.js和fireslider。但是，如果您找到另一个具有速度的滑块，或者您自己创建了滑块，那么它也会起作用。

Velocity是快速动作的引擎，也可以使用javascript和jquery（可选）。但如果你拿着火炮，你需要jquery。

我希望能帮到你。