Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

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


jrebdesign

Question

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!

 

2021-07-06_08-06-39.thumb.gif.a1f2af49360d196ec5c039e07bcace8e.gif

 

2021-07-06_08-08-45.thumb.gif.22fff26e405803f4e2257bb72374f5c5.gif

Link to comment
  • Answers 9
  • Created
  • Last Reply

Top Posters For This Question

9 answers to this question

Recommended Posts

  • 0

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!

 

2021-07-06_08-06-39.thumb.gif.a1f2af49360d196ec5c039e07bcace8e.gif

 

2021-07-06_08-08-45.thumb.gif.22fff26e405803f4e2257bb72374f5c5.gif

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment
  • 0
On 7/12/2021 at 6:29 PM, jrebdesign 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>

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment
  • 0

Also, do you want to fix these issues?

Site URL – https://easling-construction.squarespace.com/?password=easling

1. (Mobile – Homepage) On desktop, the whole picture can be seen. On mobile, the image is partially cropped.

https://easling-construction.squarespace.com/?password=easling

easling-construction.squarespace.com-01-

2. (Mobile/Tablet – Gallery) Only part of the image is visible.

https://easling-construction.squarespace.com/gallery/custom-home-3/?password=easling

easling-construction.squarespace.com-02-

3. (Tablet – Footer) Social icons is cut into 2 lines.

https://easling-construction.squarespace.com/?password=easling

easling-construction.squarespace.com-03-

4. (Tablet – About) Email is cut into 2 lines.

https://easling-construction.squarespace.com/about/?password=easling

easling-construction.squarespace.com-04-

5. (Tablet – Wood shop) The width of the text is a bit small.

https://easling-construction.squarespace.com/wood-shop/?password=easling

easling-construction.squarespace.com-05-

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment
  • 0
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;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment
  • 0
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;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment
  • 0
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?

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