Javascript 圆滑的轮播缓动示例

Slick Carousel Easing Examples

提问by Shannon L

I am using Slick Carousel (http://kenwheeler.github.io/slick/), but don't know how to incorporate different slide transitions. Does anyone have an example to share?

我正在使用 Slick Carousel ( http://kenwheeler.github.io/slick/)，但不知道如何合并不同的幻灯片过渡。有人有例子可以分享吗？

Here's what I currently have:

这是我目前拥有的：

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

On site - http://lantecctc.businesscatalyst.com/

现场 - http://lantecctc.businesscatalyst.com/

回答by Hugo

Use cssEaseinstead of easing - this is the notation detailed on slick. Not sure whether 'easeOutElastic' is allowed; as far as I'm aware slick uses standard CSS3 animations and easeOutElastic is not one of the supported values. Your closest option might be ease-out: http://www.w3schools.com/cssref/css3_pr_animation-timing-function.asp

使用cssEase而不是 easing - 这是slick 上详述的符号。不确定是否允许使用“easeOutElastic”；据我所知，slick 使用标准的 CSS3 动画，且 easeOutElastic 不是支持的值之一。您最接近的选择可能是缓出：http: //www.w3schools.com/cssref/css3_pr_animation-timing-function.asp

Update from helpful comments:useTransform: trueis necessary for this to work in some cases:

从有用的评论更新：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
      }
    }]
});

setting: cssEase, type: string, default value: 'ease', uses CSS3 Animation Easing - http://kenwheeler.github.io/slick/

设置：cssEase，类型：字符串，默认值：'ease'，使用 CSS3 Animation Easing - http://kenwheeler.github.io/slick/

回答by thrgamon

The plugin doesn't use jquery animations if CSS transitions are available.

如果 CSS 转换可用，则该插件不使用 jquery 动画。

If you want to use a specific animation style, such as those found in an easing library you can create the CSS for them here. You can then use cssEase instead of Easing, and copy in the CSS that is generated.

如果您想使用特定的动画样式，例如在缓动库中找到的样式，您可以在此处为它们创建 CSS 。然后您可以使用 cssEase 代替 Easing，并复制生成的 CSS。

For example:

例如：

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

Answer found in the documentation here: here

在此处的文档中找到答案：此处

回答by mbomb007

You can set useCSS: falsein order to use jQuery easing instead. The documentation says it will "Enable/Disable CSS Transitions".

您可以设置useCSS: false以使用 jQuery 缓动代替。文档说它将“启用/禁用 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
      }
    }]
});