Jump to content

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

Recommended Posts

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. 

Link to comment
  • Replies 9
  • Views 881
  • Created
  • Last Reply

@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:

 

Philadelphia, PA

👉 Squarespace Tutorials 

Chat/Message on FB Messenger for quickest responsehttps://m.me/dejaegherryan

 

Link to comment

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
 

 

Link to comment
  • 3 weeks later...

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.