How to create autoscrolling testimonials using Summary Block (carousel) in 7.2?

Hello,

I have been searching for an updated fix for SS 7.2 to create autoscrolling / autoplaying testimonials using the Summary Block carousel. I have, on the same page, a Summary Block grid and I haven't found anything that will allow me to just target the carousel and make it autoscroll. 

I can puzzle my way through CSS but haven't found anything to get me close to a resolution for this issue. Please help! Thank you. 

@Vanec can you share a link to the site?

@Vanec Add this code to Settings -> Advanced -> Code Injection -> Footer

 

<script>
(function(){
	window.addEventListener('load', function() {
	var next = document.querySelector('.summary-carousel-pager-next');
var autoSlide = function(){
    next.click()
};

var startSlideInterval = function(){
    interval = setInterval(autoSlide,2000);
    console.log('interval started');
}

var interval;

var stopSlideInterval = function() {
  clearInterval(interval);
    console.log('interval cleared')
} 

var summarySection = document.querySelector('[data-section-id="5e9b73e06ff3c35bddda4310"]');
  
summarySection.addEventListener('mouseover', stopSlideInterval);
summarySection.addEventListener('mouseout', startSlideInterval);

startSlideInterval()
  

})

})()
</script>

Result:

@RyanDejaegher Doesn't work ..... a lot of code turned red, see screenshot attached. 

Hmm can you zoom out to see above the code?

Sure, here it is below. I didn't write this, it was created by the previous manager of the site so I can't offer much insight.  

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/parallax.js/1.4.2/parallax.min.js"></script>

<script> 
  $('.has-background:not(:has(.sqs-video-background))').each(function() {
    var findImage = $(this).find('.section-background img');
    var imgUrl = findImage.data('src');
    var dimensions = findImage.data('image-dimensions');
    var imgWidth = dimensions.substr(0, dimensions.indexOf('x'));
    var imgHeight = dimensions.substr(dimensions.indexOf('x') + 1);
    $(this).parallax({
        imageSrc: imgUrl,
        naturalWidth: imgWidth,
        naturalHeight: imgHeight,
        speed: 0.8,
    })
});
document.getElementsByTagName("body")[0].onresize = function() {
    setTimeout(function() {
        jQuery(window).trigger('resize').trigger('scroll')
    }, 100)
}; 
</script>

<style>.has-background{background-color:transparent!important}.has-b
 

@Vanec did you add that to the header or footer? 

The issue could be that <style> tag at the end. It doesn't look like it may be missing a </style> which would be interfering with the code I shared if you added it after

@RyanDejaegher Wowwwwww you're right, that was it! Added the </style> and it fixed it, and the autoscroll is working. Thank you!

@Vanec no worries, feel free to upvote the solution 🙂

Hmmm....Why can't I get this to work?

shannonturnercakes.com 

pw: stc2020