Auto Scroll Carousel Block Squarespace 7.1

sorethumb · March 30, 2020

I'm wondering how to make a auto-scrolling carousel block on Squarespace 7.1 templates. I'm trying to make an auto-scrolling testimonials section.

derekp13 · March 30, 2020

Same question here

bluegalaxy · April 11, 2020

You can do it by creating images for your testimonials and then use a gallery block, slideshow: simple, turn on autoplay. Hopefully this feature will be added back in, there is also a paid plugin for it, but I have not tried it.

scipioni_central · April 14, 2020

I checked with SS help on this recently and they said that a slide show gallery will not autoplay. Someone in the forum gave me this code, which I placed in the Advanced area of the settings for the page. Seems to be working fine.

Now, if I could find someone who can help me add code for a carousel that will insert padding between images...

Quote


<script>
   Y.on('domready', function () {
       var galleries = Y.Squarespace.GalleryManager.getGalleries();
       for( i = 0; i<galleries.length; i++){
           galleries[i].setAttrs({"autoplay":true})
       }
   });
</script>

SaraB · April 15, 2020

scipioni_central -

I used your code and it worked! yay! Can you tell me how to slow the speed down? Thanks so much!

bluegalaxy · April 15, 2020

Great that you have code for this. There is also slideshow gallery with Autoplay and you can adjust the speed from 1-10. It's the gallery type Simple Slideshow, and scroll down to edit the Autoplay and Slide Duration settings.

scipioni_central · April 16, 2020

RIght, I was actually trying to create an autoscrolling carousel from a gallery, but when I do that, the images are flush up against one another, and I can't find anyone who knows how to add padding to the images in the carousel... along with the autoscroll.

Any suggestions?

April 22, 2020

Hi! Maybe someone can tell you.

How to increase "Slide Duration" at the slideshow block? More than standart 10s..

Thanks!

April 24, 2020

ghostplugins.com has a great plugin -- https://www.ghostplugins.com/products/super-slideshow-gallery-autoplay-version
Here is a quick review --

Edited April 24, 2020 by Julia-K

TFC · June 12, 2020

Hi all, I'm struggling with this too. I did the gallery view bit, but the text is below the image, vs as a centered an overlay. Any workarounds that you know of?

tuanphan · June 12, 2020

8 hours ago, heller said:

Hi all, I'm struggling with this too. I did the gallery view bit, but the text is below the image, vs as a centered an overlay. Any workarounds that you know of?

and you want?

TFC · June 12, 2020

i'm trying to get the text to overlay on the center of an image, vs. below. like a testimonial slider - does that make sense? something like this:

Becs · June 28, 2020

Further to the above... Using 7.1 Template (on trial site in setup)- I need this for my Home Page (Landing Page) for a logo gallery at the bottom of the page - that automatically scrolls. However nothing happened when I posted the above code into the Page - Advanced - code injection.

Is this because "Page Header Code Injection adds code to the <head> tag of that page. It won't display on Index landing pages." ?? So no way to put on Home Landing Page? see SS ref: https://support.squarespace.com/hc/en-us/articles/205815908

This is what I am wanting a smooth small scrolling logo section at bottom of home page:
https://unita.com.au/

(I found this from this post however it's not smooth scrolling: https://www.will-myers.com/scrolling-logo-in-squarespace)

Edited June 28, 2020 by Becs
add like this site:

Rebecca_Grace_Designs · September 18, 2020

**UPDATED***

For anyone still looking, I found a workaround for autoplaying a Summary Carousel Block. It autoclicks the next button every three seconds.

Inject this is Settings > Advanced > Code Injection > Footer

I updated this code to remove the use of JQuery (for page speed reasons) as well as to help with the refresh timeframe.

Edited March 26, 2021 by rebeccagracedesigns
I updated this code to remove the use of JQuery (for page speed reasons) as well as to help with the refresh timeframe.

TFC · September 21, 2020

Thanks for posting! Will check it out this week!

Artsyp · October 10, 2020

I have been looking everywhere for weeks for this!! Thank you! It works! But, how do I slow it down?

creedon · October 11, 2020

@Artsyp Increase the setInterval milliseconds. 3000 is 3 seconds. 5000 is 5 seconds. Etc.

Carli · November 3, 2020

On 9/19/2020 at 7:51 AM, rebeccagracedesigns said:

For anyone still looking, I found a workaround for autoplaying a Summary Carousel Block. It autoclicks the next button every three seconds.

Inject this is Settings > Advanced > Code Injection > Header


<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

and this in Settings > Advanced > Code Injection > Footer


<script>
setInterval(click, 3000);
function click()
{
$(".summary-carousel-pager-next").click();
}
</script>

I will probably add this to my blog!!

Hi Rebecca, I searched forever for this and it works great, thank you. Is there a way I can apply it to a single carousel?

tuanphan · November 3, 2020

1 hour ago, Carli said:

Hi Rebecca, I searched forever for this and it works great, thank you. Is there a way I can apply it to a single carousel?

change this line .summary-carousel-pager-next

to #summary-block-id .summary-carousel-pager-next

Find id with this tool https://chrome.google.com/webstore/detail/squarespace-collectionblo/bggpdfnccodbnmcndckmeehdjkjojkde

Carli · November 3, 2020

56 minutes ago, tuanphan said:

change this line .summary-carousel-pager-next

to #summary-block-id .summary-carousel-pager-next

Find id with this tool https://chrome.google.com/webstore/detail/squarespace-collectionblo/bggpdfnccodbnmcndckmeehdjkjojkde

thank you!

gabrielamadeus · November 13, 2020

On 9/18/2020 at 2:51 PM, rebeccagracedesigns said:

For anyone still looking, I found a workaround for autoplaying a Summary Carousel Block. It autoclicks the next button every three seconds.

Inject this is Settings > Advanced > Code Injection > Header


<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

and this in Settings > Advanced > Code Injection > Footer


<script>
setInterval(click, 3000);
function click()
{
$(".summary-carousel-pager-next").click();
}
</script>

I will probably add this to my blog!!

Curious if there's anyway to loop this autoplay function? Similar to how the native autoplay gallery works in squarespace. I've got 10ish featured posts in a carousel that autoplays/scrolls on my homepage, but it's usually finished advancing and static by the time users scroll down to it:

https://oregontimbertrail.org/

Thanks in advance!

(also hiding the next/prev arrows would be nifty too but not a deal breaker)

tuanphan · November 20, 2020

On 11/13/2020 at 11:24 PM, gabrielamadeus said:

Curious if there's anyway to loop this autoplay function? Similar to how the native autoplay gallery works in squarespace. I've got 10ish featured posts in a carousel that autoplays/scrolls on my homepage, but it's usually finished advancing and static by the time users scroll down to it:

https://oregontimbertrail.org/

Thanks in advance!

(also hiding the next/prev arrows would be nifty too but not a deal breaker)

Hi. Have you found the solution yet?

Brian_Bers · December 29, 2020

On 11/13/2020 at 10:24 AM, gabrielamadeus said:

Curious if there's anyway to loop this autoplay function? Similar to how the native autoplay gallery works in squarespace. I've got 10ish featured posts in a carousel that autoplays/scrolls on my homepage, but it's usually finished advancing and static by the time users scroll down to it:

https://oregontimbertrail.org/

Thanks in advance!

(also hiding the next/prev arrows would be nifty too but not a deal breaker)

Bump. Looking for the same thing!

It appears that this script does in fact "reset" after sitting on the last display group for ~25 seconds regardless of the click time interval. But that's much too long for my and most applications, I would think. Possible to modify this behavior?

tuanphan · December 30, 2020

13 hours ago, Brian_Bers said:

Bump. Looking for the same thing!

It appears that this script does in fact "reset" after sitting on the last display group for ~25 seconds regardless of the click time interval. But that's much too long for my and most applications, I would think. Possible to modify this behavior?

Which script code did you use?

Brian_Bers · December 30, 2020

This one

On 9/18/2020 at 4:51 PM, rebeccagracedesigns said:

For anyone still looking, I found a workaround for autoplaying a Summary Carousel Block. It autoclicks the next button every three seconds.

Inject this is Settings > Advanced > Code Injection > Header


<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

and this in Settings > Advanced > Code Injection > Footer


<script>
setInterval(click, 3000);
function click()
{
$(".summary-carousel-pager-next").click();
}
</script>

I will probably add this to my blog!!

Auto Scroll Carousel Block Squarespace 7.1

Recommended Posts

Link to comment

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Popular Days

Popular Posts

Rebecca_Grace_Designs

scipioni_central

sorethumb

Posted Images

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Guest

Link to comment

Guest

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Create an account or sign in to comment

News

Squarespace Webinars

Hire a Designer

Support

Community

Developers

Resources