[Resolved] ACF field / JS not working with Generatepress

Hello,

I am trying to make a ACF slider work with Generatepress theme. I copied all the code and files from the old site to the new one. I manually included all JS files. But still, can’t make the slider to change when clicking on other tabs. However, the script involved seems to be:

<script>jQuery(".tabs > li > a").click(function(){jQuery(".tabs > li").removeClass("active");jQuery(this).parent().addClass("active");var hr=jQuery(this).attr("href").substring(1);jQuery(".tabs-content .content").removeClass("active");jQuery(".tabs-content #"+hr).addClass("active");});jQuery("a[href^=#]").on("click",function(e){e.preventDefault();history.pushState({},"",this.href);});jQuery(".btn-learn").click(function(){jQuery('.your-class').slick('slickPause');});</script> <script type=text/javascript>jQuery(document).ready(function(){jQuery('.your-class').slick({infinite:true,slidesToShow:1,slidesToScroll:1,autoplay:true,autoplaySpeed:7000,dots:false,customPaging:function(slider,i){return'<img data-opt-src=https://mlwehkxtrnet.i.optimole.com/1LaRft4-4a9rjdaw/w:auto/h:auto/q:auto/https://www.ytranslations.com/wp-content/uploads/2017/06/dot-active.png    data-src=https://mlwehkxtrnet.i.optimole.com/1LaRft4-4a9rjdaw/w:auto/h:auto/q:auto/https://www.ytranslations.com/wp-content/uploads/2017/06/dot-active.png class="dot-active lazyload" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" /><noscript><img data-src=https://mlwehkxtrnet.i.optimole.com/1LaRft4-4a9rjdaw/w:auto/h:auto/q:auto/https://www.ytranslations.com/wp-content/uploads/2017/06/dot-active.png class="dot-active lazyload" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" /></noscript><noscript><img src=https://mlwehkxtrnet.i.optimole.com/1LaRft4-4a9rjdaw/w:auto/h:auto/q:auto/https://www.ytranslations.com/wp-content/uploads/2017/06/dot-active.png class=dot-active /></noscript><img data-opt-src=https://mlwehkxtrnet.i.optimole.com/1LaRft4-m8wQECjy/w:auto/h:auto/q:auto/https://www.ytranslations.com/wp-content/uploads/2017/06/dot-deactive.png   data-src=https://mlwehkxtrnet.i.optimole.com/1LaRft4-m8wQECjy/w:auto/h:auto/q:auto/https://www.ytranslations.com/wp-content/uploads/2017/06/dot-deactive.png class="dot-deactive lazyload" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" /><noscript><img data-src=https://mlwehkxtrnet.i.optimole.com/1LaRft4-m8wQECjy/w:auto/h:auto/q:auto/https://www.ytranslations.com/wp-content/uploads/2017/06/dot-deactive.png class="dot-deactive lazyload" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" /></noscript><noscript><img class=dot-deactive src=https://mlwehkxtrnet.i.optimole.com/1LaRft4-m8wQECjy/w:auto/h:auto/q:auto/https://www.ytranslations.com/wp-content/uploads/2017/06/dot-deactive.png /></noscript>';},});jQuery('.btn-learn').on('click',function(event){event.preventDefault();jQuery('.your-class').slick("slickSetOption","autoplay",false,false);jQuery(this).parent().find('.slide-content').find('p').css("height","auto");jQuery(this).hide();});});jQuery(document).ready(function(){jQuery('.team-slide').slick({infinite:true,slidesToShow:3,slidesToScroll:3,autoplay:true,dots:false,responsive:[{breakpoint:1024,settings:{slidesToShow:3,slidesToScroll:3,infinite:true,dots:true}},{breakpoint:600,settings:{slidesToShow:2,slidesToScroll:2}},{breakpoint:480,settings:{slidesToShow:1,slidesToScroll:1}}],prevArrow:jQuery('.slick-prev'),nextArrow:jQuery('.slick-next'),});});</script> <script type=text/javascript>jQuery(document).ready(function(){var bar1=new ProgressBar.Line(container1,{strokeWidth:4,easing:'easeInOut',duration:1400,color:'#FFEA82',trailColor:'#e6e8ec',trailWidth:1,svgStyle:{width:'35%',height:'70px'},from:{color:'#FFEA82'},to:{color:'#FFA76C'},step:(state,bar1)=>{bar1.path.setAttribute('stroke',state.color);}});var bar2=new ProgressBar.Line(container2,{strokeWidth:4,easing:'easeInOut',duration:1400,color:'#FFEA82',trailColor:'#e6e8ec',trailWidth:1,svgStyle:{width:'38%',height:'70px'},from:{color:'#FFEA82'},to:{color:'#DA484A'},step:(state,bar2)=>{bar2.path.setAttribute('stroke',state.color);}});var bar3=new ProgressBar.Line(container3,{strokeWidth:4,easing:'easeInOut',duration:1400,color:'#FFEA82',trailColor:'#e6e8ec',trailWidth:1,svgStyle:{width:'43%',height:'70px'},from:{color:'#FFEA82'},to:{color:'#EA582F'},step:(state,bar3)=>{bar3.path.setAttribute('stroke',state.color);}});var bar4=new ProgressBar.Line(container4,{strokeWidth:4,easing:'easeInOut',duration:1400,color:'#FFEA82',trailColor:'#e6e8ec',trailWidth:1,svgStyle:{width:'45%',height:'70px'},from:{color:'#FFEA82'},to:{color:'#FF7149'},step:(state,bar4)=>{bar4.path.setAttribute('stroke',state.color);}});jQuery(window).scroll(function(){var top_of_element=jQuery(".skills-sec").offset().top;var bottom_of_element=jQuery(".skills-sec").offset().top+jQuery(".skills-sec").outerHeight();var bottom_of_screen=jQuery(window).scrollTop()+jQuery(window).height();var top_of_screen=jQuery(window).scrollTop();if((bottom_of_screen>top_of_element)&&(top_of_screen<bottom_of_element)){jQuery('#container5 .vertical-fill').css('height','211px');jQuery('#container6 .vertical-fill').css('height','202px');jQuery('#container7 .vertical-fill').css('height','178px');jQuery('#container8 .vertical-fill').css('height','164px');bar1.animate(1.0);bar2.animate(1.0);bar3.animate(1.0);bar4.animate(1.0);}
else{}});});</script> </script>

The slide is working as expected if I insert the code inside add_action( ‘wp_head’, function () { in Code Snippets plugin.

Do you have any ideas what can I do?

Thank you .
Victor