$(document).ready(function () { var line = new ProgressBar.Line('#loader-slick-id{data.uid}', { color: '{v:variable.typoscript(path: 'plugin.tx_slickcarousel.slick_progressbar_color')}', trailColor: '{v:variable.typoscript(path: 'plugin.tx_slickcarousel.slick_progressbar_trailColor')}', strokeWidth: {v:variable.typoscript(path: 'plugin.tx_slickcarousel.slick_progressbar_strokeWidth')}, trailWidth: {v:variable.typoscript(path: 'plugin.tx_slickcarousel.slick_progressbar_trailWidth')}, easing: '{v:variable.typoscript(path: 'plugin.tx_slickcarousel.slick_progressbar_easing')}', duration: {data.pi_flexform.autoplaySpeed}, }); line.animate(1.0); $('#slick-id{data.uid}-main').on('beforeChange', function(event, slick, currentSlide, nextSlide){ line.set(0); line.animate(1.0); }); $( "#slick-id{data.uid}-main" ).mouseover(function() { line.stop(); }); $( "#slick-id{data.uid}-main" ).mouseout(function() { line.animate(1.0); }); $( "#slick-id{data.uid}-nav" ).mouseover(function() { line.stop(); }); $( "#slick-id{data.uid}-nav" ).mouseout(function() { line.animate(1.0); }); $('#slick-id{data.uid}').on('beforeChange', function(event, slick, currentSlide, nextSlide){ line.set(0); line.animate(1.0); }); $( "#slick-id{data.uid}" ).mouseover(function() { line.stop(); }); $( "#slick-id{data.uid}" ).mouseout(function() { line.animate(1.0); }); });