Slick Carouselイージングの例

Question

Slick Carousel（http://kenwheeler.github.io/slick/）を使用していますが、さまざまなスライドトランジションを組み込む方法はわかりません。誰かが共有する例がありますか？

は、ここで私は、現在持っているものです：サイトで

$('.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 
      } 
     }] 
    }); 

からhttp://lantecctc.businesscatalyst.com/

Answer 1

使用cssEase代わりの緩和 - これはスリックで詳細な表記法です。 'easeOutElastic'が許可されているかどうかは不明です。私が知っている限り、slickは標準のCSS3アニメーションを使用し、easeOutElasticはサポートされている値の1つではありません。あなたの最も近いオプションは、やすアウトかもしれません：http://www.w3schools.com/cssref/css3_pr_animation-timing-function.asp

有益なコメントからの更新： useTransform：これはいくつかのケースで動作するため、真 が必要です：

$('.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 
     } 
    }] 
}); 

設定：cssEase 、タイプ：文字列、デフォルト値： 'ease'、CSS3アニメーションイージングを使用 - http://kenwheeler.github.io/slick/

Answer 2

プラグインは使用しませんCSSトランジションが利用可能な場合、jqueryアニメーション

イージングライブラリにあるような特定のアニメーションスタイルを使用する場合は、hereのCSSを作成できます。その後、Easingの代わりにcssEaseを使用して、生成されたCSSでコピーすることができます。例えば

：ここではドキュメントに記載されてい

$('.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 
      } 
     }] 
    }); 

回答：here