New Headlines Auto-Layout Banner Slideshow: how to make it auto-play

Just discovered the new auto-layout option in headlines to create a rotating banner with text - yay!! 

From what I can tell right now - it has to be clicked to change...hoping someone can help me have it auto-play/auto-scroll/loop? Maybe it's a an option but I'm just not seeing it?

Thanks!

Just solved for 2 members. If you share link to your site, we can help easier

On 7/6/2021 at 7:13 PM, jrebdesign said:

Just discovered the new auto-layout option in headlines to create a rotating banner with text - yay!! 

From what I can tell right now - it has to be clicked to change...hoping someone can help me have it auto-play/auto-scroll/loop? Maybe it's a an option but I'm just not seeing it?

 

Thanks!

 

 

@tuanphan

https://easling-construction.squarespace.com/
pw: easling

On 7/12/2021 at 6:29 PM, jrebdesign said:

@tuanphan

https://easling-construction.squarespace.com/
pw: easling

Add to 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>

@tuanphan yes please - that would be great! 

https://easling-construction.squarespace.com/
pw: easling

On 7/16/2021 at 6:22 PM, jrebdesign said:

@tuanphan yes please - that would be great! 

https://easling-construction.squarespace.com/
pw: easling

Q1+4. Add to Design > Custom CSS

/* resize mobile home slide */
@media screen and (max-width:767px) {
body.homepage ul.slides {
    min-height: 35vh !important;
}
}
/* About email */
[data-section-id="60da782e35009b07faee99a5"] a[href*="mailto"] {
    white-space: nowrap !important;
}

@tuanphan - thank you!

On 7/20/2021 at 6:53 PM, jrebdesign said:

@tuanphan - thank you!

Q5. Add to Design > Custom CSS

/* Tablet-wood shop width */
@media screne and (max-width:991px) and (min-width:768px) {
body#collection-60da781835009b07faee954c .content {
    width: 100% !important;
}
}

On 7/14/2021 at 2:58 AM, tuanphan said:

Add to 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>

 

@tuanphan Is there a way to get this to loop after it reaches the final slide?

On 9/21/2021 at 3:32 PM, louis1996 said:

@tuanphan Is there a way to get this to loop after it reaches the final slide?

You can contact @creedon

On 9/21/2021 at 1:32 AM, louis1996 said:

Is there a way to get this to loop after it reaches the final slide?

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 is not a security breach. 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.

On 7/13/2021 at 9:58 PM, tuanphan said:

Add to 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>

 

@tuanphan I added this with the section ID but its not working for me. Did I do it wrong? (you are an admin on this site btw 🙂

https://chameleon-tambourine-hd67.squarespace.com

/*
    
      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 = [
      
      // '[data-section-id="615dfcb5a76ca6638a8b6619"]',
      
      ];
      
    // 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>

@AngieRoxyE

Change the following line...

// '[data-section-id="615dfcb5a76ca6638a8b6619"]',

...to...

'[data-section-id="615dfcb5a76ca6638a8b6619"]',

The // (double forward slash at the beginning of a line in Javascript means the line is a comment and is ignored when compiled. The removal is mentioned in my code.

Let us know how it goes.

Folks just a heads up. For the freshest version of my code please see the following.

It is great you came up with this auto scroll fix @creedon. All we need now is a easy way to have the same transition effects as the Gallery Section. It is so odd they would create this Auto list section that is so similar to the Gallery Section but leave off an auto play and transitions.

On 9/23/2021 at 10:39 PM, tuanphan said:

You can contact @creedon

On 9/24/2021 at 1:07 AM, 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 is not a security breach. 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.

Hi @tuanphan and @creedon,

I'm also looking to autoplay the banner slideshow on my homepage and have it loop automatically. I would greatly appreciate the help!

https://jclfc.squarespace.com/ 

@holagabriela

You have my code installed and it is working. Did you view your site in private browsing or incognito mode? The effect is not active while editing a site.

On 12/8/2021 at 4:55 PM, creedon said:

@holagabriela

You have my code installed and it is working. Did you view your site in private browsing or incognito mode? The effect is not active while editing a site.

@creedon I it working now. Thanks!!

please help me with autoplay for my top banner:

https://prostate.squarespace.com

password: prostate

1 hour ago, curtis594 said:

please help me with autoplay for my top banner:

It appears to be working to me.