how can I get carousels to automatically rotate (autoplay)?

I've got a couple of carousels on this page that I'd like to automatically rotate (autoplay) when the page loads. Especially on mobile as it's not immediately clear that there is more content which the user doesn't see unless they click the left or right arrow buttons. 

Any help is greatly appreciated!

Hi,

Which carousel are you using? Summary Block Carousel, Gallery Block Carousel... Can you share link to that page?

Hi @tuanphan

You can take a look in here https://carnation-point-bfjy.squarespace.com/config/pages
Thank you!

hi @tuanphan

sorry, I thought I had included a link, but I guess I didn't.

It's on this page: hitonoto.com/portfolio (password is squarespace01).

I'm not sure what kind of carousel it is. It just says carousel (please see attached screenshot).

On 11/18/2023 at 12:20 PM, LucyBold said:

Hi @tuanphan

You can take a look in here https://carnation-point-bfjy.squarespace.com/config/pages
Thank you!

/config is url to edit mode

you can click arrow on top right or top left of screen > real url will appear on browser address bar.

On 11/18/2023 at 4:16 PM, nvdg said:

hi @tuanphan

sorry, I thought I had included a link, but I guess I didn't.

It's on this page: hitonoto.com/portfolio (password is squarespace01).

I'm not sure what kind of carousel it is. It just says carousel (please see attached screenshot).

Add to Website > Website Tools > Code Injection > Footer

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/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 = 3;
    
    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>

Thanks about that @tuanphan.

1. Here is what i currently have https://www.lacalifornie.es/home 
I will to have this on autoplay

2. Alternately I created this other option https://www.lacalifornie.es/home-1
but i will need to add a Tittle and a link.

Thanks for your help!

On 11/20/2023 at 12:28 PM, LucyBold said:

Thanks about that @tuanphan.

1. Here is what i currently have https://www.lacalifornie.es/home 
I will to have this on autoplay

2. Alternately I created this other option https://www.lacalifornie.es/home-1
but i will need to add a Tittle and a link.

Thanks for your help!

The code in previous comment should work on your case, you can try it first

Thanks so much @tuanphan
It works! can I hide the arrows on desktop and maintain the autoplay? Can I adjust the style (font, color, size) and placement of the Title and button?

I appreciate your time and help!

On 11/22/2023 at 1:25 PM, LucyBold said:

Thanks so much @tuanphan
It works! can I hide the arrows on desktop and maintain the autoplay? Can I adjust the style (font, color, size) and placement of the Title and button?

I appreciate your time and help!

Just add this code to Custom CSS

/* hide slideshow arrows */
.user-items-list-banner-slideshow .arrow-container {
    visibility: hidden;
}

Thanks @tuanphan! It works.
Can I now make the transition between slides a bit smoother? and adjust the timing?

Thanks again for your help

On 11/24/2023 at 2:21 PM, LucyBold said:

Thanks @tuanphan! It works.
Can I now make the transition between slides a bit smoother? and adjust the timing?

Thanks again for your help

Adjust this line

Thank you thank you @tuanphan!
I am getting SO close. Could a numbered navigation be added at the bottom and the title right on top? Keepin the whole image as a link opening on a new page. See mock up for reference

On 11/27/2023 at 3:17 AM, LucyBold said:

Thank you thank you @tuanphan!
I am getting SO close. Could a numbered navigation be added at the bottom and the title right on top? Keepin the whole image as a link opening on a new page. See mock up for reference

Numbered: It requires a lot of code, It will take a lot of time, you can consider another approach

You mean remove title or move title to top?

hi @tuanphan

Thank you very much for your help and apologies for the late reply! 

I added the code to the footer and it works. Kind of.... The weird thing is that I have two carousels on that page and only one is now auto-rotating. I can't find any reason why the second one wouldn't rotate.

Could you offer any explanation? Many thanks! 

On 11/28/2023 at 10:47 AM, nvdg said:

hi @tuanphan

Thank you very much for your help and apologies for the late reply! 

I added the code to the footer and it works. Kind of.... The weird thing is that I have two carousels on that page and only one is now auto-rotating. I can't find any reason why the second one wouldn't rotate.

Could you offer any explanation? Many thanks! 

You try enable Arrows on second carousel (we can use code to make it transparent then)

hi @tuanphan

I enabled the arrows on the second carousel and now it rotates. Thank you!

I actually don't mind the arrows, but just in case, would you mind sharing how I can hide them per carousel individually? 

Many thanks! 

On 12/4/2023 at 8:45 AM, nvdg said:

hi @tuanphan

I enabled the arrows on the second carousel and now it rotates. Thank you!

I actually don't mind the arrows, but just in case, would you mind sharing how I can hide them per carousel individually? 

Many thanks! 

Use this CSS code

/* hide slideshow arrows */
[data-section-id="enter id"] .user-items-list-banner-slideshow .arrow-container {
    visibility: hidden;
}

Replace with your data section id, use this free tool to find data section id

https://chrome.google.com/webstore/detail/squarespace-id-finder/igjamfnifnkmecjidfbdipieoaeghcff