Auto Scroll Carousel Block Squarespace 7.1

Don't know if there's a quirk in the 7.1 implementation. I was searching for auto scroll carousel and slideshow and after much frustration and effectively giving up, I accidentally stumbled on the feature! It only seems available from inside a blog post (i.e. when you are editing the content of a blog post)!

E.g. Try this. Add/Create a Blog page (Pages>Collections>Blog) - It doesn't matter which layout you select for the blog page so select whatever suites you best. Once the blog page is created you will see about four example posts created for you. Select one for editing (click edit). Once the post is open for editing go down to the top of a text block and proceed to create a new content block (by clicking + on the frame of the text block - This will open the window where you can select a new type of content block. Look down the and you will find the section named "Gallery".

Bingo! There you will see Slideshow, Carousel (and some others but these are the two you've been looking for!). Create on e of these. You may now need to do some jiggery pokery to make the new Blog fit in and work with your web site but this seems to be the only way to get that auto scroll feature.

Clearly the feature is built in to 7.1 but for some reason is missing form the list of available content blocks when this menu comes up outside of a blog post. Why??? Looks like a oversite and that it should be available from other areas too.

Please Squarespace coders, can this be looked into as this is a much needed feature that we need access to from other types of Pages also.

For now, I hope this post is helpful in some way to anyone else trying to get a auto scroll slideshow or carousel working on their v7.1 website. :-) 

On 1/3/2021 at 10:51 PM, williana said:

Don't know if there's a quirk in the 7.1 implementation. I was searching for auto scroll carousel and slideshow and after much frustration and effectively giving up, I accidentally stumbled on the feature! It only seems available from inside a blog post (i.e. when you are editing the content of a blog post)!

E.g. Try this. Add/Create a Blog page (Pages>Collections>Blog) - It doesn't matter which layout you select for the blog page so select whatever suites you best. Once the blog page is created you will see about four example posts created for you. Select one for editing (click edit). Once the post is open for editing go down to the top of a text block and proceed to create a new content block (by clicking + on the frame of the text block - This will open the window where you can select a new type of content block. Look down the and you will find the section named "Gallery".

Bingo! There you will see Slideshow, Carousel (and some others but these are the two you've been looking for!). Create on e of these. You may now need to do some jiggery pokery to make the new Blog fit in and work with your web site but this seems to be the only way to get that auto scroll feature.

Clearly the feature is built in to 7.1 but for some reason is missing form the list of available content blocks when this menu comes up outside of a blog post. Why??? Looks like a oversite and that it should be available from other areas too.

Please Squarespace coders, can this be looked into as this is a much needed feature that we need access to from other types of Pages also.

For now, I hope this post is helpful in some way to anyone else trying to get a auto scroll slideshow or carousel working on their v7.1 website. :-) 

 

Good spot! That's frankly a bit rubbish it's only available for blog pages.

11 hours ago, JoeB said:

Good spot! That's frankly a bit rubbish it's only available for blog pages.

You can add a gallery section to a regular page. It has simple slideshow and slideshow reel as two of the options.

Aha, thanks @creedon It is a little confusing though!

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

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

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!

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?

On 9/18/2020 at 10: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!!

I tried this following the above and  your video instructions on your website but neither worked. Has there been an update thats stopped it working. i tried the summary block for a blog and the product page with a carousel with no luck.

On 3/17/2021 at 9:06 PM, Ejderha said:

I tried this following the above and  your video instructions on your website but neither worked. Has there been an update thats stopped it working. i tried the summary block for a blog and the product page with a carousel with no luck.

Do you still need help? Can you share link to page where you added carousel?

The 3000 in the code makes it change every 3 seconds. Make this number higher to slow it down.

On 3/17/2021 at 10:06 AM, Ejderha said:

I tried this following the above and  your video instructions on your website but neither worked. Has there been an update thats stopped it working. i tried the summary block for a blog and the product page with a carousel with no luck.

It's possible it was clashing with another Jquery Library on your site. Try the update as it doesn't use Jquery.

On 11/2/2020 at 10:35 PM, 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? 

Yep!! Add a block id before the .summary-carousel-pager-next..

So... (" #BLOCKID .summary-carousel-pager-next ")

On 3/2/2021 at 1:29 AM, tuanphan said:

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

I can edit it Edit Mode, but when I'm just in my back-end navigation, as soon as the loop happens, Squarespace enters Edit Mode. I recorded this video to show what's happening: https://www.loom.com/share/0bd095c2009143a6bece11dc3157e81f

The only clicking I'm doing is hitting done to exit Edit Mode, and it goes right back in after a few seconds when the carousel loops. I don't have any other jQuerys installed on the site. It makes it basically impossible to do any navigating through the menus when logged in while the home page is in the Preview Window because it closes the menu and enters Edit Mode every 6 seconds 😆 

On 4/6/2021 at 5:08 PM, kmds said:

I can edit it Edit Mode, but when I'm just in my back-end navigation, as soon as the loop happens, Squarespace enters Edit Mode. I recorded this video to show what's happening: https://www.loom.com/share/0bd095c2009143a6bece11dc3157e81f

The only clicking I'm doing is hitting done to exit Edit Mode, and it goes right back in after a few seconds when the carousel loops. I don't have any other jQuerys installed on the site. It makes it basically impossible to do any navigating through the menus when logged in while the home page is in the Preview Window because it closes the menu and enters Edit Mode every 6 seconds 😆 

Remove the script code you used.

Next, create a notepad file on your pc >> paste this code

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

save it with name: summary-loop.js

Next, upload it to your site, follow this guide

next add this new code to Code Injection Header or Page Header

<script>
	document.addEventListener('DOMContentLoaded', function() {
      if ( window.location == window.parent.location ) {
          var script = document.createElement('script');
          script.type = 'text/javascript';
          script.src = '/s/summary-loop.js';    

          document.getElementsByTagName('head')[0].appendChild(script);
      } else {
          console.log('iframe');
      }
  });
</script>

If you feel it is diffuclt & can't do, you can send me a message. I can help, free of course

Hi @tuanphan, I tried your above code, all steps made sense to me, but it's sadly still not working. Maybe because I have 2 galleries on one page? Please have a look at: https://www.blckbx.tv/home-new - second I might need some custom coding / UI tweaks (payed for) that I'd like to consider. How and where to go about this?

Thnx in advance,
Stefan 

On 4/23/2021 at 8:33 PM, ZZESTO said:

Hi @tuanphan, I tried your above code, all steps made sense to me, but it's sadly still not working. Maybe because I have 2 galleries on one page? Please have a look at: https://www.blckbx.tv/home-new - second I might need some custom coding / UI tweaks (payed for) that I'd like to consider. How and where to go about this?

Thnx in advance,
Stefan 

Add to Settings > Advanced > Code Injection > Footer

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

Hi @tuanphan, thnx! Two questions;

1. I can't add code to the footer, there is no option to do so (see screenshot)
2. I might need some custom coding / UI tweaks (payed for) that I'd like to consider. How and where to contact you for this work?

Thnx, Stefan

21 hours ago, ZZESTO said:

Hi @tuanphan, thnx! Two questions;

1. I can't add code to the footer, there is no option to do so (see screenshot)
2. I might need some custom coding / UI tweaks (payed for) that I'd like to consider. How and where to contact you for this work?

Thnx, Stefan

1. Your screenshot is Page Header Code Injection, Not Site Code Injection

Home > Settings > Advanced > Code Injection > Footer

2. You can contact me via link in the signature.

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

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

Hi @rebeccagracedesigns I used your code, thank you for sharing! When I click the back arrow to view the first items in the summary block it quickly rotates to the second set of content after just 2 seconds. I have the setInterval set to 4000. Is there a way to slow down the auto rotation to the same 4 seconds after someone clicks? 

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

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

Hi @tuanphan I used Rebecca's code, but when I click the back arrow to view the first items in the summary carousel block it quickly rotates to the second set of content after just 2 seconds. I have the setInterval set to 4000. Is there a way to slow down the auto rotation to the same 4 seconds after someone clicks? 

On 6/15/2021 at 3:33 AM, BeaRue said:

Hi @tuanphan I used Rebecca's code, but when I click the back arrow to view the first items in the summary carousel block it quickly rotates to the second set of content after just 2 seconds. I have the setInterval set to 4000. Is there a way to slow down the auto rotation to the same 4 seconds after someone clicks? 

Have you found the solution yet?

@tuanphan No solution yet. The issue I'm experiencing is that the script does in fact "reset" after sitting on the last display group BUT it takes about 25 seconds regardless of the click time interval. That's too long. Is it possible to shorten this? 

I used @rebeccagracedesigns’s updated code….

Injected into Settings > Advanced > Code Injection > Footer

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

On 7/6/2021 at 11:10 PM, tuanphan said:

Have you found the solution yet?

@tuanphan No solution yet. The issue I'm experiencing is that the script does in fact "reset" after sitting on the last display group BUT it takes about 25 seconds regardless of the click time interval. That's too long. Is it possible to shorten this? 

I used @rebeccagracedesigns’s updated code….

Injected into Settings > Advanced > Code Injection > Footer

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

On 4/12/2021 at 9:30 AM, tuanphan said:

Remove the script code you used.

Next, create a notepad file on your pc >> paste this code

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

save it with name: summary-loop.js

Next, upload it to your site, follow this guide

next add this new code to Code Injection Header or Page Header

<script>
	document.addEventListener('DOMContentLoaded', function() {
      if ( window.location == window.parent.location ) {
          var script = document.createElement('script');
          script.type = 'text/javascript';
          script.src = '/s/summary-loop.js';    

          document.getElementsByTagName('head')[0].appendChild(script);
      } else {
          console.log('iframe');
      }
  });
</script>

If you feel it is diffuclt & can't do, you can send me a message. I can help, free of course

@tuanphan Is there a way to use this code but target to a particular section? Rather than all summary galleries on the site?

18 hours ago, alanahelbig said:

@tuanphan Is there a way to use this code but target to a particular section? Rather than all summary galleries on the site?

change this code to

$('[data-section-id="enter id here"] .summary-carousel-pager-next').click();

find data section id with https://chrome.google.com/webstore/detail/squarespace-id-finder/igjamfnifnkmecjidfbdipieoaeghcff?hl=en

For anyone still looking, I found a workaround for auto-playing a SS Slider.
<!-- SS Slider auto scroll working script -->

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>

<!-- Slider Autoplay -->

<script>  setInterval(click, 5000);     function click()    
{      
$("button.user-items-list-banner-slideshow__arrow-button.user-items-list-banner-slideshow__arrow-button--right").click();  
 }
</script>
Invented/funded by Nikhil (smile)☺️ ❤️