滑动旋转木马放松示例

Slick Carousel Easing Examples

本文关键字：旋转木马      更新时间：2023-09-26

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

使用cssEase而不是放松-这是slick上详细介绍的符号。不确定是否允许使用"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
      }
    }]
});

设置：cssBase，类型：string，默认值："ease"，使用CSS3动画Easing-http://kenwheeler.github.io/slick/

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

如果你想使用特定的动画样式，比如在轻松库中找到的样式，你可以在这里为它们创建CSS。然后，您可以使用cssBase而不是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转换"。

$('.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
      }
    }]
});
相关文章：