web-dev-qa-db-ja.com

スリックカルーセルイージングの例

スリックカルーセル（ 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/

javascriptslick.js
11
Shannon L

イージングの代わりにcssEaseを使用します-これは、滑らかな詳細な表記法です。 「easeOutElastic」が許可されているかどうかわからない。私の知る限り、slickは標準のCSS3アニメーションを使用しており、easeOutElasticはサポートされている値の1つではありません。最も近いオプションはease-outかもしれません： http://www.w3schools.com/cssref/css3_pr_animation-timing-function.asp

有用なコメントからの更新：useTransform：trueは、これがいくつかのケースで機能するために必要です：

$('.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/

9
hugobrook

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

イージングライブラリにあるような特定のアニメーションスタイルを使用する場合は、CSSを作成できます here 。その後、イージングの代わりに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

3
thrgamon

代わりにjQueryイージングを使用するためにuseCSS: falseを設定できます。ドキュメントには、「CSSトランジションを有効/無効にする」と書かれています。

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