Jump to content

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

Recommended Posts


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


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

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

var interval;

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

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






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>

  $('.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);
        imageSrc: imgUrl,
        naturalWidth: imgWidth,
        naturalHeight: imgHeight,
        speed: 0.8,
document.getElementsByTagName("body")[0].onresize = function() {
    setTimeout(function() {
    }, 100)



Link to comment
  • 3 weeks later...


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.