Slick Carousel Easing Beispiele

Ich verwende Slick Carousel (http://kenwheeler.github.io/slick/), aber ich weiß nicht, wie man verschiedene Slide-Übergänge einbaut. Hat jemand ein Beispiel zu teilen?Slick Carousel Easing Beispiele

Hier ist, was ich derzeit haben:

$('.slider1').slick({ 
     autoplay:true, 
     autoplaySpeed: 4500, 
     arrows:false, 
     slide:'.slider-pic', 
     slidesToShow:1, 
     slidesToScroll:1, 
     dots:false, 
     easing: 'easeOutElastic', 
     responsive: [ 
     { 
      breakpoint: 1024, 
      settings: { 
      dots: false 
      } 
     }] 
    });

vor Ort - http://lantecctc.businesscatalyst.com/

Quelle

2016-01-04 Shannon L

Was genau wollen Sie erreichen? Mit Slick können Sie Dinge wie Timing und Lockerungen anpassen, aber Sie können nicht viel tun, um Übergänge über einfache Fades und Folien hinaus anzupassen. – jered

Ich möchte wirklich nur den Übergang zwischen den Folien verlangsamen. –

Allerdings würde ich auch gerne die Fähigkeiten kennen. Ich dachte, dass ich in der Lage wäre, einen der Jquery-Lockerungs-Effekte zu verwenden. –

Verwenden cssEase statt Lockerung - das ist die Notation auf glatten detailliert ist. Nicht sicher, ob 'easeOutElastic' erlaubt ist; Soweit ich weiß, verwendet Slick Standard-CSS3-Animationen und easeOutElastic ist keiner der unterstützten Werte. Ihre nächste Option sein könnte Mühelosigkeit-out: http://www.w3schools.com/cssref/css3_pr_animation-timing-function.asp

Update von hilfreichen Kommentare: useTransform: true ist notwendig, dies in einigen Fällen zu arbeiten:

$('.slider1').slick({ 
    useTransform: true, 
    autoplay:true, 
    autoplaySpeed: 4500, 
    arrows:false, 
    slide:'.slider-pic', 
    slidesToShow:1, 
    slidesToScroll:1, 
    dots:false, 
    cssEase: 'ease-out', 
    responsive: [ 
    { 
     breakpoint: 1024, 
     settings: { 
     dots: false 
     } 
    }] 
});

Einstellung: cssEase , type: string, Standardwert: 'ease', verwendet CSS3 Animation Easing -

Quelle

2016-04-11 18:55:04 hugostacks

Arbeitete für mich, aber ich musste hinzufügen "UseTransform: true", um dies zu arbeiten. –

'useTransform: true' war auch für mich notwendig. Dies machte einen großen Unterschied darin, nicht nur die richtige Lockerung zu verwenden, sondern auch den Herky-ruckartigen Standard-Sliding-Übergang auszubügeln. – beth

'useTransform: true' ist sowieso standardmäßig true – vaskort

Das Plugin wird nicht verwendet jQuery-Animationen, wenn CSS-Übergänge verfügbar sind.

Wenn Sie einen bestimmten Animationsstil verwenden möchten, wie er beispielsweise in einer Beschleunigungsbibliothek zu finden ist, können Sie das CSS für sie erstellen here. Sie können dann cssEase anstelle von Easing verwenden und in das generierte CSS kopieren.

Zum Beispiel:

$('.slider1').slick({ 
     autoplay:true, 
     autoplaySpeed: 4500, 
     arrows:false, 
     slide:'.slider-pic', 
     slidesToShow:1, 
     slidesToScroll:1, 
     dots:false, 
     cssEase: 'cubic-bezier(0.600, -0.280, 0.735, 0.045)', 
     responsive: [ 
     { 
      breakpoint: 1024, 
      settings: { 
      dots: false 
      } 
     }] 
    });

Antwort in der Dokumentation hier: here

Quelle

2016-09-28 15:48:11 thrgamon

Slick Carousel Easing Beispiele

Antwort

Verwandte Themen