Slick Karussell-Springen, wenn Breite des aktiven Diawechsel

Siehe Geige: http://jsfiddle.net/br24p3Lr/Slick Karussell-Springen, wenn Breite des aktiven Diawechsel

Ich versuche, die Animation korrekt zu erhalten, wenn auf eine neue aktive Folie zu verändern. Ich habe verschiedene Methoden ausprobiert, um diese Animation zu reparieren, aber ich bin momentan irgendwie tot im Wasser.

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; 
}

ich verschiedene Möglichkeiten ausprobiert habe versucht, dies zu beheben, aber die Animation hält Springen.

Hilfe würde wirklich geschätzt werden.

Mit freundlichen Grüßen, Dylan Smit

Quelle

2017-05-10 Dylan Smit

Ja, ich habe gleiches Problem mit einer Website i für einen Kunden in der Vergangenheit gemacht. Ich habe auch viele verschiedene Schieberegler ausprobiert, um zu erkennen, dass das gleiche Problem auch bei ihnen auftritt. Das Problem ist, dass Javascript und jquery (wenn Sie es verwenden) keine guten Folienänderungen unterstützen. Dies ist nicht spezifisch für einen Schieberegler. Das verursacht Panne, Springen und viele andere Probleme. Die Lösung, die ich fand, war velocity.js mit fireslider. Aber wenn Sie einen anderen Slider mit Velocity finden oder Sie Ihren eigenen erzeugen, wird das auch funktionieren.

Velocity ist eine Engine für schnelle Bewegungen und Arbeit mit Javascript und jquery (optional). Aber wenn Sie feuerslider nehmen, brauchen Sie jquery.

Ich hoffe, dass Ihnen helfen wird.

Quelle

2017-05-10 12:57:07 Hexxefir

Übergänge scheinen ja glatt zu laufen. FireSlider berechnet jedoch eine Gleitbreite in Prozent und auch die Übergänge basieren auf Prozentsätzen. Haben Sie eine Ahnung, wie Sie mit acceleration.js die Breite des activeslides und die anderen Slides einstellen? –

Ok, wenn ich gut verstehe, möchten Sie die Breite Ihrer Folien in einer anderen Einheit wie Pixel, Em, Rem etc ... Die einfachste Möglichkeit, die ich sehe, ist durch Ihre CSS-Datei. Erstellen Sie eine Klasse für diese Bilder und legen Sie sie in dieser Klasse auf die gewünschte Größe fest. Wenn Sie unterschiedliche Größen für jedes Bild wünschen, tun Sie dies mit der ID. Ich denke, es ist die beste Lösung. Oder wenn Sie sich einfach fühlen, können Sie Änderungen im FireSlider-Code vornehmen, aber das ist die komplizierteste Wahl. Ich hoffe es hilft dir. – Hexxefir

Slick Karussell-Springen, wenn Breite des aktiven Diawechsel

Antwort

Verwandte Themen