问题光滑的轮播轻松示例

我正在使用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/

6406

2018-01-04 21:52

起源

你想要完成什么？使用Slick，您可以调整计时和缓动等内容，但除了简单的淡入淡出和幻灯片之外，您无法自定义过渡。 - jered

我真的只想减慢幻灯片之间的过渡。 - Shannon L

但是，我也想知道这些功能。我以为我可以使用任何jquery缓动效果。 - Shannon L

仔细阅读文档，所有这些信息都在“设置”部分下。您当然可以更改转换的速度以及使用任何CSS3或jQuery缓动功能。 - jered

答案:

使用 cssEase 而不是缓和 - 这是浮油上的详细说明。不确定是否允许'easeOutElastic';据我所知，slick使用标准的CSS3动画，而easeOutElastic不是受支持的值之一。你最近的选择可能是渐出： 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/

2018-04-11 18:55

为我工作，但我不得不补充 useTransform: true, 使这项工作。 - Purple Tentacle

useTransform: true 对我来说也是必要的。这不仅在使用正确的宽松效果方面产生了巨大的影响，而且还消除了笨拙的默认滑动过渡。 - beth

useTransform: true 无论如何，默认是真的 - vaskort

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

如果要使用特定的动画样式，例如在缓动库中找到的样式，则可以为它们创建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
          }
        }]
    });

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

2017-09-28 15:48

问题 光滑的轮播轻松示例

答案:

热门问题

问题光滑的轮播轻松示例