web-dev-qa-db-fra.com

Exemples d'assouplissement de carrousel lisse

J'utilise Slick Carousel ( http://kenwheeler.github.io/slick/ ), mais je ne sais pas comment incorporer différentes transitions de diapositives. Quelqu'un a-t-il un exemple à partager?

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/

javascriptslick.js
11
Shannon L

Utilisez cssEase au lieu d'assouplir - c'est la notation détaillée sur slick. Je ne sais pas si "easelout outlastic" est autorisé; pour autant que je sache, slick utilise des animations CSS3 standard et easysut n'est pas une des valeurs prises en charge. L'option la plus proche pourrait être la facilité : http://www.w3schools.com/cssref/css3_pr_animation-timing-function.asp

Mise à jour à partir de commentaires utiles: useTransform: true 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
      }
    }]
});

paramètre: cssEase, saisissez: chaîne, valeur par défaut: 'facilité', utilise CSS3 Animation Easing - http://kenwheeler.github.io/slick/

9
hugobrook

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

Si vous souhaitez utiliser un style d'animation spécifique, tel que ceux trouvés dans une bibliothèque d'accélération, vous pouvez créer le CSS pour eux ici . Vous pouvez ensuite utiliser cssEase au lieu de Easing et copier dans le CSS 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 trouvée dans la documentation ici: ici

3
thrgamon

Vous pouvez définir useCSS: false pour utiliser à la place l'accélération jQuery. La documentation indique qu'il "Activera/Désactiver les transitions 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
      }
    }]
});
0
mbomb007