Javascript 光滑旋转木马放松示例

我正在使用Slick Carousel（），但不知道如何合并不同的幻灯片过渡。有没有人可以分享一个例子

以下是我目前拥有的：

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

---

现场-

使用cssEase而不是ease-这是slick上详细说明的符号。 不确定是否允许使用“easeOutElastic”；据我所知，slick使用标准CSS3动画，EaseOuterastic不受支持。您最接近的选项可能是放松：

有用评论的更新： 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，类型：string，默认值：“ease”，使用CSS3动画缓和-

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

如果您想使用特定的动画样式，例如在easing库中找到的样式，您可以为它们创建CSS。然后可以使用cssEase而不是Easing，并复制生成的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
          }
        }]
    });

---

在这里的文档中可以找到答案：

您可以设置

useCSS:false

以使用jQuery。文档中说它将“启用/禁用CSS转换”

---

你到底想完成什么？有了Slick，你可以调整时间和放松等，但除了简单的淡入淡出和幻灯片外，你无法定制更多的过渡。我真的只想减缓幻灯片之间的过渡。不过，我也想知道这些功能。我想我可以使用jquery的任何缓解效果。仔细阅读文档，所有这些信息都在“设置”部分下面。您当然可以更改转换的速度，也可以使用任何CSS3或jQuery easing函数。这对我来说是可行的，但我必须添加

useTransform:true，

来实现这一点。

useTransform:true

对我来说也是必要的。这不仅在使用正确的缓和方式方面，而且在消除herky急促的默认滑动过渡方面产生了巨大的差异。

useTransform:true

默认情况下是正确的。我可以确认缓和方式：“easeOutElastic”仅在jQuery.easing.min.js插件的帮助下才起作用。

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