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

I can't get this to work either. Using 7.1. Help please? Thank you!

shannonturnercakes.com

pw: stc2020

On 7/9/2020 at 10:57 PM, brusselsprouts said:

I'm another person trying to get a Reel slideshow to autoplay in 7.1. I've seen a few answers floating around, but none seem to be working for me. Have folks confirmed that the code above shared by @Andrei and @tuanphan makes autoplay work for slideshow blocks in 7.1? If yes, I'm seeing people post that it works either when injected in the footer of the whole site or under advanced settings for a particular page — which is working? 

And maybe I'm completely missing something here, but should the slug added to target your gallery be your page ID (e.g. collection ID found in body tag) or section id for the gallery itself? 🙃

If you share link to your site, I can give the code to make gallery reel autoplay.

22 minutes ago, nicolettely said:

I can't get this to work either. Using 7.1. Help please? Thank you!

shannonturnercakes.com

pw: stc2020

Can you share link to page where you use summary block?

This works fantastic for me in the footer. However it doesn't like to loop. Any luck there? 

Hi @tuanphan, I am also trying to make a summary carousel autoplay in 7.1, would you be able to take a look at this page? Thanks!

https://triceratops-maroon-kxrm.squarespace.com/home

pw: nailed

On 8/11/2020 at 2:32 AM, xallarap said:

Hi @tuanphan, I am also trying to make a summary carousel autoplay in 7.1, would you be able to take a look at this page? Thanks!

https://triceratops-maroon-kxrm.squarespace.com/home

pw: nailed

Add to Page Settings > Advanced > Header

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
<script>
  $(document).ready(function() {
    try {
     var container = Y.one("#page-section-5f319a27fa5d637772c3c12a"); 
     var gallery = Y.Squarespace.GalleryManager.getGalleryByContainer(container);
     gallery.setAttrs({
       "autoplay":true,
       "autoplayOptions": {
         "timeout":2000, /*make this higher to decrease speed, lower to increase it*/
         "randomize": true
       }
     });
   } catch (e) {
     console.error("Could not configure Gallery autoplay.", e);
   }
});
</script>

@tuanphan I'm trying to make autoscroll work for my site?  What could should I add?  elevateptr.com.  Thank you!!!!

On 8/11/2020 at 2:32 AM, xallarap said:

Hi @tuanphan, I am also trying to make a summary carousel autoplay in 7.1, would you be able to take a look at this page? Thanks!

https://triceratops-maroon-kxrm.squarespace.com/home

pw: nailed

Sorry, didnt get the notification. Do you still need help on this?

1 hour ago, jcsport123 said:

@tuanphan I'm trying to make autoscroll work for my site?  What could should I add?  elevateptr.com.  Thank you!!!!

Add to Home > Settings > Advanced > Code Injection > Footer

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
<script>
  $(document).ready(function() {
    try {
     var container = Y.one("div#page-section-5f3e088ea1068224988e22e0"); /*change this to the slug of your page*/
     var gallery = Y.Squarespace.GalleryManager.getGalleryByContainer(container);
     gallery.setAttrs({
       "autoplay":true,
       "autoplayOptions": {
         "timeout":3000, /*make this higher to decrease speed, lower to increase it*/
         "randomize": true
       }
     });
   } catch (e) {
     console.error("Could not configure Gallery autoplay.", e);
   }
});
</script>

Hey @clayyount—how can i slow down the switch timing for this code from your original answer? 

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

Please and thank you!!! 

Hey guys, 

I have two summary blocks on one page that I need to be on autoplay. Using 7.1. Any chance you can help with this? I tried pasting the codes but it didn't work for me. Thanks x

5 hours ago, Dunja said:

Hey guys, 

I have two summary blocks on one page that I need to be on autoplay. Using 7.1. Any chance you can help with this? I tried pasting the codes but it didn't work for me. Thanks x

What is your site url?

Hi, I'm trying to get my carousel to autoplay on mobile with my 7.1 template, but unfortunately none of the code posted here seems to be working..

https://sanctlucas.com/overview-of-paintings

On 10/15/2021 at 4:06 AM, petermayer said:

Hi, I'm trying to get my carousel to autoplay on mobile with my 7.1 template, but unfortunately none of the code posted here seems to be working..

https://sanctlucas.com/overview-of-paintings

Hi,

Which code did you try?

Hi,

I am trying to add custom CSS so that autoplay applies to all of the carousels on my website.

So far, it only applies to the homepage.

The CSS I have used is:

 

<!-- Auto Scroll Layout Sections -->
<script>
  (function(){
    let playInBackend = true,
        timing = 6,
        section = '',
        direction = 1; //1 = forwards, 0 = backwards

    /*Do not Adjust below this line*/
function AutoScrollLayout(e){e=""==e?document.querySelector(".user-items-list-section"):document.querySelector(e);let t,n,o,i,c,r=!1,s=e.querySelectorAll('button[class*="__arrow-button"]');function d(){t=setInterval(u,n)}function u(){o=document.querySelector("body.sqs-edit-mode-active"),i=document.querySelector(".sqs-modal-lightbox-open"),r||o||i||!c||s[direction].click()}n=1e3*timing;if(document.addEventListener("visibilitychange",function(){r=!!document.hidden}),["mousedown","touchstart"].forEach(t=>{e.addEventListener(t,function(){r=!0})}),["mouseup","touchend"].forEach(n=>{e.addEventListener(n,function(){r=!1,clearInterval(t),d()})}),window.IntersectionObserver){new IntersectionObserver((e,t)=>{e.forEach(e=>{c=!!e.isIntersecting})},{rootMargin:"-75px 0px -75px 0px"}).observe(e)}s[direction]&&d()}window.addEventListener("load",function(){let e=new Array;e.push(section),section.includes(",")&&(e=section.split(",")),e.forEach(e=>{(window.top==window.self||window.top!==window.self&&playInBackend)&&new AutoScrollLayout(e)})});
  }());
</script>

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

<script>
   Y.on('domready', function () {
       var galleries = Y.Squarespace.GalleryManager.getGalleries();
       var duration = 2000;
       var gallery=galleries[0];
       var carousel=gallery["gallery-design"];
       var totalGroups=carousel.totalGroups;
       var currentGroup=0
       var container=gallery.get("container");
       var nextBtn=Y.one(gallery.get("elements.next")._nodes[0]).on("click",function(e){
           e.preventDefault();
           e.stopPropagation();
           advanceCarousel()
       })
       var prevBtn=Y.one(gallery.get("elements.previous")._nodes[0]).on("click",function(e){
           e.preventDefault();
           e.stopPropagation();
           backupCarousel()
       })
       Y.one(container._node).get('parentNode').on("mouseover",function(){
           clearInterval(myInterval)
       })
       Y.one(container._node).get('parentNode').on("mouseout",function(){
           clearInterval(myInterval)
           setMyInterval()
       })
       var myInterval;
       function setMyInterval(){
           myInterval = setInterval(function(){
               advanceCarousel()
           },duration)
       }
       setMyInterval();
       function advanceCarousel(){
           if(currentGroup==(totalGroups-1)){
               currentGroup=0;
           }else{
               currentGroup++;
           }   
           carousel.goToGroup(currentGroup);
       }
       function backupCarousel(){
           if(currentGroup==0){
               currentGroup=totalGroups-1
           }else{
               currentGroup--;
           }
           carousel.goToGroup(currentGroup);
       }
   });
</script>

Any advice would be greatly appreciated.

Thanks

On 8/12/2020 at 6:06 AM, tuanphan said:

Add to Page Settings > Advanced > Header

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
<script>
  $(document).ready(function() {
    try {
     var container = Y.one("#page-section-5f319a27fa5d637772c3c12a"); 
     var gallery = Y.Squarespace.GalleryManager.getGalleryByContainer(container);
     gallery.setAttrs({
       "autoplay":true,
       "autoplayOptions": {
         "timeout":2000, /*make this higher to decrease speed, lower to increase it*/
         "randomize": true
       }
     });
   } catch (e) {
     console.error("Could not configure Gallery autoplay.", e);
   }
});
</script>

 

Hi @tuanphan - is there any way to set the carousel to loop for 7.1?

Can you share your site with protected password so I can take a look?

Hello 🙂

Tried some of the suggestions in here but no luck.

I'm trying to autoplay a testimonial carousel section. Is there code to make this happen.

antenatal.co.nz

Password: Antenatal2022

Section ID: section[data-section-id="633be7c4f61a010e79bb8d67"]

Thank you in advance 

2 hours ago, denbystrange said:

Tried some of the suggestions in here but no luck.

Please post the URL for a page on your site where we can see your issue.

If your site is not public please set up a site-wide password, if you've not already done so.

Post the password here.

Adding a site-wide password does not allow anyone to alter your site. It only allows those with the password to see your site. Please read the documentation at the link provided to understand how it works.

Please read the documentation at the link provided on how to share a link to your site to understand how it works. A link to the backend of the your site won’t work for us, i.e. a url that contains /config/.

We can then take a look at your issue.

3 hours ago, creedon said:

Please post the URL for a page on your site where we can see your issue.

If your site is not public please set up a site-wide password, if you've not already done so.

Post the password here.

Adding a site-wide password does not allow anyone to alter your site. It only allows those with the password to see your site. Please read the documentation at the link provided to understand how it works.

Please read the documentation at the link provided on how to share a link to your site to understand how it works. A link to the backend of the your site won’t work for us, i.e. a url that contains /config/.

We can then take a look at your issue.

The url is https://antenatal.co.nz

The section is on the homepage and the site wide password is Antenatal2022

On 10/8/2022 at 12:01 PM, denbystrange said:

The url is https://antenatal.co.nz

The section is on the homepage and the site wide password is Antenatal2022

I see it already autoscroll from my end

6 hours ago, tuanphan said:

I see it already autoscroll from my end

Yea all sorted, thank you!