Примеры облегчения карусели

Я использую 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/

Ответы

Ответ 1

Используйте 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, тип: строка, значение по умолчанию: "легкость", использует CSS3 Animation Easing - http://kenwheeler.github.io/slick/

Ответ 2

Плагин не использует jquery-анимацию, если доступны переходы CSS.

Если вы хотите использовать определенный стиль анимации, например, найденный в библиотеке ослабления, вы можете создать для них 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
          }
        }]
    });

Ответ найден в документации здесь: здесь

Ответ 3

Вы можете установить 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
      }
    }]
});