Jump to content

Auto Scroll Carousel Block Squarespace 7.1

Go to solution Solved by Rebecca_Grace_Designs,

Recommended Posts

On 11/3/2020 at 5:19 AM, 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

@tuanphan Heya - just tried this now and it hasn't worked for me - have attached what my footer code section looks like. Have I done this correctly? 🙂

Screenshot 2021-10-11 at 19.02.32.png

Link to comment
On 10/12/2021 at 1:02 AM, JessM1 said:

@tuanphan Heya - just tried this now and it hasn't worked for me - have attached what my footer code section looks like. Have I done this correctly? 🙂

Screenshot 2021-10-11 at 19.02.32.png

between " and block-yui... is a #

it should be

#block-yui_3....

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
On 10/13/2021 at 8:50 AM, tuanphan said:

between " and block-yui... is a #

it should be

#block-yui_3....

 

Just tried that - it's not working and the code is now showing up in red which I thought meant error? 🤔 Please see attached. Thanks v much for your help on this!

Screenshot 2021-10-14 at 11.08.07.png

Link to comment
22 hours ago, JessM1 said:

Just tried that - it's not working and the code is now showing up in red which I thought meant error? 🤔 Please see attached. Thanks v much for your help on this!

Screenshot 2021-10-14 at 11.08.07.png

see carefully first " and last "

They seems different

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 3 months later...

I got the original solution to work. Just had to inspect the button, find the topmost div, take a good class name from it. I chose: user-items-list-carousel__arrow-button--right

Worked like a charm. But I don't like that it will never pause. It should autoscroll until the user hovers one of the icons. Then the scrolling should stop for 2 minutes. Will try to fix that.

Link to comment
  • 1 month later...
On 9/19/2020 at 9:51 AM, 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've gotten a few customer support tickets from SquareKicker customers complaining about Squarespace not working because the SK UI keeps closing.  I found this code above was the issue and after searching google for it, it lead me here.

Because it initiates a "Click" every 3-5 seconds, when in EDIT MODE when you open something on Squarespace, (SQSP UI or even Add Section) 3 seconds later it closes.  This is because the code above is simulating a click on the screen which force closes the UI.

It also should only be in the header injection of a page with a carousel NOT the footer, otherwise your websites console triggers an error every 3 seconds, which is not great for SEO or performance.

This code really needs to be wrapped in "Do not run this if the page is in Edit Mode." See code update below:

NOTE: For Squarespace 7.1 (untested on 7.0)

<script>
  if $( 'body.sqs-edit-mode-active').length ) {

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

 

SquareKickerHi, I'm Nick, CEO & Co-Founder at squarekicker.com.  Take your Squarespace sites to the next level with SquareKicker's No-Code Design & Animation Extension. Break free from templates & complex code and start building unique websites that you are proud to show your clients without ever having to write a single line of code. 

Squarespace Extension  ●  Templates  ●  News  ●  Inspiration  ●  Tutorials  ●  Resources

 

Link to comment
  • 11 months later...

Hi there,

I would like to auto-scroll all gallery reels from this page: https://www.creativeportrait.net.au/studio-and-location

 

 

I have the code below but it auto-scroll only the 1st gallery:

 

<script>
    /**
    *  Gallery Section Auto Scroller
    **/
  (function () {
    setAutoScroll({
        gallery: 1,
      direction: 2,
      timing: 3000,
    });

    /*
    * Copy and paste the above code
    * to target more auto-scrolling
    * sections
    **/

    /** gallery
    * gallery section order on the page. Ex:
    * 1 = the first gallery section on a page,
    * 2 = the second gallery section on a page
    **/

    /** direction
    * direction the gallery should go in.
    * 1 = backwards,
    * 2 = forwards
    **/

    /** timing
    * timing between each slide, in milliseconds. Ex:
    * 2000 = 2 seconds
    **/

    function setAutoScroll(settings) {
      function init() {
        let section = document.querySelectorAll(".page-section.gallery-section")[settings.gallery - 1];

        function clickArrow() {
          if (section && !document.querySelector("html.sqs-modal-lightbox-open") && !document.hidden && !document.querySelector("body.sqs-edit-mode")) {
            let arrow = section.querySelectorAll(".gallery-reel-control .gallery-reel-control-btn")[settings.direction - 1];
            if (arrow) arrow.click();
          }
        }

        window.setInterval(clickArrow, settings.timing);
      }

      window.addEventListener("DOMContentLoaded", init);
    }
  })();


</script>

 

Link to comment
On 3/3/2023 at 2:23 PM, Jeremyn said:

Hi there,

I would like to auto-scroll all gallery reels from this page: https://www.creativeportrait.net.au/studio-and-location

 

 

I have the code below but it auto-scroll only the 1st gallery:

 

<script>
    /**
    *  Gallery Section Auto Scroller
    **/
  (function () {
    setAutoScroll({
        gallery: 1,
      direction: 2,
      timing: 3000,
    });

    /*
    * Copy and paste the above code
    * to target more auto-scrolling
    * sections
    **/

    /** gallery
    * gallery section order on the page. Ex:
    * 1 = the first gallery section on a page,
    * 2 = the second gallery section on a page
    **/

    /** direction
    * direction the gallery should go in.
    * 1 = backwards,
    * 2 = forwards
    **/

    /** timing
    * timing between each slide, in milliseconds. Ex:
    * 2000 = 2 seconds
    **/

    function setAutoScroll(settings) {
      function init() {
        let section = document.querySelectorAll(".page-section.gallery-section")[settings.gallery - 1];

        function clickArrow() {
          if (section && !document.querySelector("html.sqs-modal-lightbox-open") && !document.hidden && !document.querySelector("body.sqs-edit-mode")) {
            let arrow = section.querySelectorAll(".gallery-reel-control .gallery-reel-control-btn")[settings.direction - 1];
            if (arrow) arrow.click();
          }
        }

        window.setInterval(clickArrow, settings.timing);
      }

      window.addEventListener("DOMContentLoaded", init);
    }
  })();


</script>

 

Use thsis new code

<script>
(function docReady(fn) {
    // see if DOM is already available
    if (document.readyState === "complete" || document.readyState === "interactive") {
        // call on next available tick
        setTimeout(fn, 1);
    } else {
        document.addEventListener("DOMContentLoaded", fn);
    }
})(() => {
    if ( window.location == window.parent.location ) {
      const reelControl = document.querySelector('.gallery-reel-control [aria-label="Next Slide"]');
      if (reelControl) {
        (function reelTimer() {          
            setTimeout(() => {
              reelControl.click();
              reelTimer();
            }, 2000);  // change this value to change the speed           
        })(); 
      }
    }
});
</script>

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
On 3/6/2023 at 2:03 PM, Jeremyn said:

Thank you for sending the new code Tuan. I tried it out by adding it to the advanced setting of the page but only the first gallery is going on auto-scroll.

Any idea where the problem is?

 

 

 

Try this new code, to bottom of Code Injection > Footer

<script>
jQuery(document).ready(function($){
	setInterval(function(){ 
	$('.gallery-reel-control-btn[data-next]').click()
	},2000);
})
</script>

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
On 3/13/2023 at 11:10 AM, Jeremyn said:

Hi Tuan,

I just realise now that the previous code closes the edit section window automatically when I open them.

 

How can I please fix this?

 

Suppose your site url is: jeremyn.squarespace.com

You can access this link: jerymyn.squarespace.com/config/safe

It will disable custom code in Edit Mode, so you can edit everything easier

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
On 3/16/2023 at 6:11 PM, Jeremyn said:

My site is creativeportrait.net.au or https://squid-echidna-882a.squarespace.com/

 

You are also a contributor to it.

You can access this link, it will disable code in edit mode, so you can edit everything it

https://squid-echidna-882a.squarespace.com/config/safe

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
On 3/24/2023 at 11:31 AM, KristenRuthSmith said:

@tuanphan I have 3 slider gallery sections on my page (7.1), and I want the top and bottom to auto-scroll to the right while the middle gallery auto scrolls to the left. I've tried messing around with the various codes shared on this thread but I can't get it to work. Any help would be appreciated!

Screen Shot 2023-03-23 at 9.30.42 PM.png

Can you share link to this page? I think we can use script code to enable that

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
On 3/30/2023 at 6:51 AM, KristenRuthSmith said:

@tuanphan firefly-media.squarespace.com   PW: TempPassword

Thank you. Can you arrow arrows? (We will give code to make arrows invisible then)

Enable arrows, we can use script code to make it click arrows automatically

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
On 3/30/2023 at 6:51 AM, KristenRuthSmith said:

@tuanphan firefly-media.squarespace.com   PW: TempPassword

Add this code to Settings > Advanced > Code Injection > Footer

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script>
  $(function(){
  window.setInterval(function(){
    {$('[data-section-id="63f3a0f3f7b083322f9f0056"] .gallery-reel-control:nth-of-type(2) .gallery-reel-control-btn, [data-section-id="63f3a3fb07ed8a1026e55936"] .gallery-reel-control:nth-of-type(2) .gallery-reel-control-btn')
    [0].click()}     
  }, 2000);window.setInterval(function(){
    {$('[data-section-id="63f3a3f8d8dcfa5d15f7b29d"] .gallery-reel-control:nth-of-type(1) .gallery-reel-control-btn')
    [0].click()}     
  }, 2000);
});
</script>

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 1 month later...

I've tried a few of the scripts mentioned in this thread but can't get any of them to work... The sensitive nature of my site contents prevents me sharing links on a public forum which makes debugging near impossible.

I wanted to automatically scroll one testimonial section but after not managing to get this working I decided to try it globally and then edit it from there. Globally it fails too... I'm a bit stuck!

 

Link to comment
On 6/2/2023 at 8:11 PM, sanchez_77 said:

I've tried a few of the scripts mentioned in this thread but can't get any of them to work... The sensitive nature of my site contents prevents me sharing links on a public forum which makes debugging near impossible.

I wanted to automatically scroll one testimonial section but after not managing to get this working I decided to try it globally and then edit it from there. Globally it fails too... I'm a bit stuck!

 

Can you share link to page where you use testimonials?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

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

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.