时间戳

首页 > 解决方案 > 使用 Barba js Slick Slider 不起作用

javascript - 使用 Barba js Slick Slider 不起作用

问题描述

我正在使用 Barba Js 进行页面转换。启动 barba js 后，Slick 滑块不起作用。我不明白是什么问题，如何解决这个问题，任何人帮助我解决这个问题请评论。

jQuery(document).ready(function() {
    $('.slider').slick({
    });
});


/* page transition begin*/

function pageTransition() {
    let tl = gsap.timeline();
    tl.to('ul.transition li', { duration: 0.6, scaleY: 1, transformOrigin: "bottom left", ease: "expo.out"});
    tl.to('ul.transition li', { duration: 0.6, scaleY: 0, transformOrigin: "bottom left", ease: "expo.in"});
}
function contentAnimation() {
    let tl = gsap.timeline();
    tl.from('body', { duration: 1.5, opacity: 0, });
    tl.to('img', { duration: 0.5, opacity: 1 },  "-=1.1")
}


function delay(n) {
    n = n || 1000;
    return new Promise(done => {
        setTimeout(() => {
            done();
        }, n);
    });
}

$(function() {
    barba.init({
        sync: true,
        transitions: [{
            async leave(data) {
                const done = this.async();
                pageTransition();
                await delay(1000);
                done();
            },
            async enter(data) {
                contentAnimation();
            },
            async once(data) {
                contentAnimation();
            }
        }]
    });
});
/* page transition end*/

标签： javascriptjqueryslick.jsbarbajs

解决方案

每次页面导航时我们都必须初始化并调用slider()函数

  function playSlider(){
   $('.slider').slick({   }); 
  }


/* page transition begin*/

function pageTransition() {
    let tl = gsap.timeline();
    tl.to('ul.transition li', { duration: 0.6, scaleY: 1, transformOrigin: "bottom left", ease: "expo.out"});
    tl.to('ul.transition li', { duration: 0.6, scaleY: 0, transformOrigin: "bottom left", ease: "expo.in"});
}
function contentAnimation() {
    let tl = gsap.timeline();
    tl.from('body', { duration: 1.5, opacity: 0, });
    tl.to('img', { duration: 0.5, opacity: 1 },  "-=1.1")
}


function delay(n) {
    n = n || 1000;
    return new Promise(done => {
        setTimeout(() => {
            done();
        }, n);
    });
}

$(function() {
    barba.init({
        sync: true,
        transitions: [{
            async leave(data) {
                const done = this.async();
                pageTransition();
                await delay(1000);
                done();
            },
            async enter(data) {
                contentAnimation();
               playSlider()
            },
            async once(data) {
                contentAnimation();
                playSlider()
            }
        }]
    });
});
/* page transition end*/

推荐阅读