Slick Carrousel Assouplissement Des Exemples

Je suis à l'aide de la Nappe de Carrousel (http://kenwheeler.github.io/slick/), mais ne savent pas comment intégrer les différentes transitions entre les diapositives. Quelqu'un aurait-il un exemple de partage?

Voici ce que j'ai actuellement:

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

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

Qu'est-ce exactement que vous voulez accomplir? Slick vous pouvez régler des choses comme la synchronisation et l'assouplissement, mais vous ne pouvez pas faire beaucoup pour personnaliser les transitions au-delà de simples fondus et des diapositives.
J'ai vraiment juste envie de ralentir la transition entre les diapositives.
Cependant, j'aimerais aussi connaître les possibilités. J'ai pensé que je serais en mesure d'utiliser l'un de l'jquery easing effets.
Lisez attentivement la documentation, l'ensemble de cette information est sous la section "Paramètres". Vous pouvez certainement changer la vitesse de la transition ainsi que des CSS3 jQuery easing de la fonction.

OriginalL'auteur Shannon L | 2016-01-04

  1. 9

    Utilisation cssEase au lieu de soulager - c'est la notation détaillée sur la nappe.
    Pas sûr que 'easeOutElastic' est autorisé, pour autant que je suis conscient de la nappe de utilise la norme CSS3 animations et easeOutElastic n'est pas l'une des valeurs prises en charge. Votre option la plus proche pourrait être ease-out: http://www.w3schools.com/cssref/css3_pr_animation-timing-function.asp

    Mise à jour à partir des commentaires utiles:
    useTransform: vrai
    est nécessaire pour que cela fonctionne dans certains cas:

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

    réglage: cssEase, type: string valeur par défaut: 'facilité', utilise CSS3 Animation d'Assouplissement - http://kenwheeler.github.io/slick/

    A fonctionné pour moi, mais j'ai dû ajouter useTransform: true, pour faire ce travail.
    useTransform: true a également été nécessaire pour moi. Cela fait une énorme différence non seulement à l'aide de la droite d'assouplissement, mais également une planche à la herky saccadé par défaut de glissement de transition.
    useTransform: true est vrai par défaut de toute façon

    OriginalL'auteur hugobrook

  2. 2

    Le plugin n'utilise pas jquery animations si les transitions CSS sont disponibles.

    Si vous souhaitez utiliser un style d'animation, tels que ceux trouvés dans un assouplissement de la bibliothèque, vous pouvez créer le CSS pour eux ici. Vous pouvez ensuite utiliser cssEase au lieu de s'apaiser, et le copier dans le fichier CSS qui est généré.

    Par exemple:

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

    Réponse que l'on trouve dans la documentation ici: ici

    OriginalL'auteur thrgamon