Jump to content

Autoplay on Banner Slideshow?

Recommended Posts

3 hours ago, BeckyY said:

Site URL: https://www.dutchamericanconnection.com/

Hi, I'm using the Banner Slideshow for testimonials on the homepage of my site www.dutchamericanconnection.com - is there a way to have it play automatically? I didn't see anything in the settings. Currently user navigates with the arrows

Thanks

Becky

Add to Settings > Advanced > Code Injection > Footer

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

  $( ( ) => {
  
    /*
    
      auto click user items list arrow right
      
      Version       : 0.1d0
      
      SS Version    : 7.1
      
      Dependancies  : jQuery
      
      Note          : this effect is not active in SS Preview to test it use
                      private browsing < https://bit.ly/3f6lhq2 >.
      
      By            : Thomas Creedon < http://www.tomsWeb.consulting/ >
      
      */
      
    const clickIntervalSeconds = 6;
    
    const dataSectionIds = [
    
      /*
      
        to limit the effect to certain page sections, enter data section ids for
        each page section.
        
        the format of each line is a data section id
        
        following is an example line. copy the example line below and paste
        after the example line. remove '// ' at beginning of pasted line. repeat
        for as many data sections ids as needed
        
        */
        
      // '[enter data section id here between single quotes]',
      
      ];
      
    // do not change anything below, there be the borg here
    
    if ( window.frameElement !== null ) return; // bail if in Preview
    
    let selector = [
    
      '.user-items-list-banner-slideshow__arrow-button--right',
      
      '.user-items-list-carousel__arrow-button--right',
      
      ];
      
    // begin shotgun selector
    
      if ( ! dataSectionIds.length ) dataSectionIds.push ( '' );
      
      selector = $.map ( selector, function ( s, i ) {
      
        if ( ! dataSectionIds.length ) dataSectionIds.push ( '' );
        
        const a = $.map ( dataSectionIds, function ( d, i ) {
        
          if ( d ) d = '[data-section-id="' + d + '"] ';
          
          return d + s;
          
          } )
          
        return a;
        
        } )
        
        .join ( ', ' );
        
      // end shotgun selector
    
    const $button = $( selector );
    
    if ( ! $button.length ) return; // bail if no button
    
    const click = ( ) => {
    
      $button.click ( );
      
      }
      
    setInterval ( click, clickIntervalSeconds * 1000 );
    
    } );
    
  </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
  • 2 months later...

hi there, trying to get this to work for a client's site I am building, but they don't have a business or premium account, so I can't inject code into footer or header. is there still a way to do it?

I would also like it to work on the banner slideshow on the HOME page AND another banner slideshow on the TEAM page.

this is on 7.1

https://octagon-hen-dy7j.squarespace.com/

pw: autoplay73

Edited by dguralnick
Link to comment
On 2/9/2022 at 2:54 AM, dguralnick said:

hi there, trying to get this to work for a client's site I am building, but they don't have a business or premium account, so I can't inject code into footer or header. is there still a way to do it?

I would also like it to work on the banner slideshow on the HOME page AND another banner slideshow on the TEAM page.

this is on 7.1

https://octagon-hen-dy7j.squarespace.com/

pw: autoplay73

Do you still need help?

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
  • 5 months later...
  • 2 months later...

Hi @tuanphan

I have tried entering the above code (complete) into the 'advanced code injection, footer, but it doesn't seem to do anything?

As described above I am trying to animate the slideshow banner so that it auto scrolls, once every few seconds. I'm using it to display different quotes on my site.

Thanks very much

 

Alex

 

Link to comment
On 10/13/2022 at 9:57 PM, Alpen said:

Hi @tuanphan

I have tried entering the above code (complete) into the 'advanced code injection, footer, but it doesn't seem to do anything?

As described above I am trying to animate the slideshow banner so that it auto scrolls, once every few seconds. I'm using it to display different quotes on my site.

Thanks very much

 

Alex

 

Try adding item buttons then use above code

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
  • 8 months later...

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.