Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 5
jasonbarone

Summary Block: How can I set the Carousel to "autoplay"?

Question

I love the new Summary Block carousel. I'm curious if it's possible to "autoplay" the carousel much like galleries can do. I know this is possible using Developer Platform galleries, but would love to be able to use with Block Carousels.

Edited by rhyann

  • 🚀Founder at Squarefront, the global community of Squarespace builders.
  • 🎥Documenting the process of building Squarefront on YouTube.
  • 🚗Senior Design Engineer, Design Platform at Uber.
  • 🍕Connect with me on Instagram, Twitter and Linkedin.
  • Need help with Squarespace? I've used the platform for well over 10 years and have helped thousands of businesses, both small and large. Send me an email!

Share this post


Link to post

Recommended Posts

  • 0

For some reason this solution (the original approved solution) has stopped working... has anyone else experienced this?

We are using the Brine template. It may have happened after the most current Squarespace update because all was working fine for the past several months.

Edited by tb1200
Initial Revision

Share this post


Link to post
  • 0

This script stopped working properly for us in March 2019. Possibly due to a SS update? Would love help figuring out how to adjust.

Edited by tb1200
Initial Revision

Share this post


Link to post
  • 0

@tb1200 I was thinking the same. I realized that we had successfully implemented this in the past with another page on our site, but that it had stopped working. Wasn't sure when.

@WTCOC Any ideas on how to get this working again?

Share this post


Link to post
  • 0

This code is still working for me. However, when using an index, I did find I had to put the code in the header of the index rather than one of the pages in the index.

Share this post


Link to post
  • 0

Hi there. I am wondering how to change the amount of time each piece of the summary block is displayed. I have tried adjusting the duration variable but it still only displays each entry for about 5 seconds. Thoughts?

Share this post


Link to post
  • 0

so.... i tried all suggested solutions and nothing seemed to work for the past 3 hours.

the most recent suggested solution by @LJSpace did not work for me either.

the value

galleries

returned is just weird. It returns an empty

array

and yet there are some

t

weird-object-looking thing (you should know what i mean if you're a developer).

i started investigating the

Y.Squarespace

object in the console and thank god i found a solution!

just paste the following into the code injection. im on squarespace 7 and using the Bryant theme.


<script>
   Y.on('domready', function () {
       Y.Squarespace.Gallery2.ATTRS.autoplay.value = true
   })
</script>

hope it helps the next person who reads this!

Edited by eugeneoei

Share this post


Link to post
  • 0

The solution worked for me, but how do I control how much time passes. Right now it about 12 seconds between pages and longer at the end before it restarts. That is too long for my use. 

Thanks!

Share this post


Link to post
  • 0

@eugeneoei

Strange, maybe try again, I think SquareSpace made some updates. I also started using a different code for this, which I found in an earlier post since I wanted to target a specific gallery. Remember to add this to the page header code injection OR the header code injection for the Index if it's in an Index. Also it may not work in preview. Try testing it from an incognito window in your browser.

 

<script>  
 Y.on('domready', function () {
   try {
     var container = Y.one("#reviews"); /*change this to the slug of your page*/
     var gallery = Y.Squarespace.GalleryManager.getGalleryByContainer(container);
     gallery.setAttrs({
       "autoplay":true,
       "autoplayOptions": {
         "timeout":9000, /*make this higher to decrease speed, lower to increase it*/
         "randomize": true
       }
     });
   } catch (e) {
     console.error("Could not configure Gallery autoplay.", e);
   }
 });
</script>

 

Share this post


Link to post
  • 0
Posted (edited)

Great, I got this working on my index (Brine). Thanks everyone for the collaborative effort.

For any noobs (like me) the slug replacement would be ("#pagename") - which is the page name you're sourcing your testimonials from, which in my case was called Testimonials

 

Two questions - as this code injection stuff is kind of another coding format to the Design CSS... how can we add easing to this? It's linear animation could be tweaked to be more pleasing. And how do we remove the arrows? (as they are no longer needed in my case)

Edited by JonJonJon

Share this post


Link to post
  • 0

An issue:

It seems to only work on the first load up of that page. i.e if you navigate to another page, then navigate back, be that via avigation or browser back buton.. then it no longer animates. You have to refresh.

 

Share this post


Link to post
  • 0

Moving the arrows

I decided to leave the arrows in, because as mentioned the autoplay only works on the first interaction with the carousel.

This code I got from: https://thirtyeightvisuals.com/blog/custom-arrows-testimonial-carousel-squarespace

Which also outlines more customisations to the carousel should you wish

/////TESTIMONIALS ARROWS///

.summary-carousel-pager {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  width: 100% !important;
  z-index: 1;
}

.sqs-gallery-design-carousel .sqs-gallery-controls .previous {
  float: left;
}
.sqs-gallery-design-carousel .sqs-gallery-controls .previous,
.sqs-gallery-design-carousel .sqs-gallery-controls .next {
  margin:0;
}

 

Share this post


Link to post
  • 0

Hi guys, 

Is this still working? I've been trying to make it work for hours and nothing works.
Please help!
Thank you

Share this post


Link to post
  • -1

you are right!!!!you have to put it in the header of each page, then it does not effect the rest of the site!

don´t put it in advanced/code injection/header!!

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...