Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0
Vanec

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

Question

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. 

Share this post


Link to post

9 answers to this question

Recommended Posts

  • 2

@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

Available for hire

Beyond Copy/Paste: Learn CSS for Squarespace Workshop

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

 

Share this post


Link to post
  • 0

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
 

 

Share this post


Link to post
  • 0

@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


Philadelphia, PA

Available for hire

Beyond Copy/Paste: Learn CSS for Squarespace Workshop

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

 

Share this post


Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...