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

Auto Scroll Carousel Block Squarespace 7.1


sorethumb

Question

Recommended Posts

  • 5

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

<script>
window.onload = function() {
  var nextArrow = document.querySelector(".summary-carousel-pager-next");
  
  function clickNext() {
    nextArrow.click();
  }
 
  setInterval(clickNext, 3000);
};
</script>


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

Edited 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.
Link to comment
  • 1
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

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

 

and this in Settings > Advanced > Code Injection > Footer



<!-- Summary Block Autoplay -->
<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? 

Link to comment
  • 1
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

Link to comment
  • 1
On 3/1/2021 at 1:04 AM, kmds said:

Installed this today, and it works! It also auto-loops! Buuuuut while logged into the site, as soon as the first loop happens, it forces me into Edit mode..... Anyone have any idea what might be happening to cause that? It otherwise looks and works perfect!

You mean, you can't edit in Edit Mode?

Link to comment
  • 0

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>

 

 

Link to comment
  • 0
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?

Link to comment
  • 0

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 by Becs
add like this site:
Link to comment
  • 0
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

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

 

and this in Settings > Advanced > Code Injection > Footer



<!-- Summary Block Autoplay -->
<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) 

Link to comment
  • 0
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?

Link to comment
  • 0
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?

Link to comment
  • 0
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?

Link to comment

Create an account or sign in to comment

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

×
×
  • Create New...