使用 Barba js Slick Slider 不起作用

Question

I am using Barba Js for page Transitions. After initiating the barba js the Slick slider was not working. I don't understand what was the problem, how to solve this issue, any one help me to solve this issue please comment.

 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*/

Answer 1

We Have to init and call the slider() function each time on page navigation

 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*/