autoscroll list items in gallery view

Site URL: https://monroe-dems.squarespace.com/

Is there a way for the list items (in gallery view) to autoscroll, that is, to rotate automatically, as if somebody was clicking the "next" arrow?

6 hours ago, Timacious said:

Site URL: https://monroe-dems.squarespace.com/

Is there a way for the list items (in gallery view) to autoscroll, that is, to rotate automatically, as if somebody was clicking the "next" arrow?

 

 

Add to Settings > Advanced > Code Injection > Footer

<!-- Autolist Autoplay by creedon -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>

  $( ( ) => {
  
    /*
    
      this code by Creedon SS forum
      
      */
      
    const clickIntervalSeconds = 6;
    
    // do not change anything below, there be the borg here
    
    if ( window.frameElement !== null ) return; // bail if in Preview
    
    const selector = '.user-items-list-banner-slideshow__arrow-button--right';
    
    const $button = $( selector );
    
    if ( ! $button.length ) return; // bail if no button
    
    const click = ( ) => {
    
      $button.click ( );
      
      }
      
    setInterval ( click, clickIntervalSeconds * 1000 );
    
    } );
    
	</script>

I only had to make a small tweak to the code to get it to work – I changed

.user-items-list-banner-slideshow__arrow-button--right

to .user-items-list-carousel__arrow-button--right

Awesome, thank you!!!

Ok and my next question is, is there a way for the viewer to stop the scrolling action?  For example if they click on the "back" arrow to go back one item, they probably don't want it to keep moving again.  Or if they clicked anywhere in the list item (over any text that didn't have any link already)

Quote

I only had to make a small tweak to the code to get it to work

I had already added that feature to the code but that code was in a DM. Please see Section Auto Layout Right Arrow Auto Click.

6 hours ago, Timacious said:

Ok and my next question is, is there a way for the viewer to stop the scrolling action?  For example if they click on the "back" arrow to go back one item, they probably don't want it to keep moving again.  Or if they clicked anywhere in the list item (over any text that didn't have any link already)

That a is bit of a tricky one. I'd have to cogitate on this one a bit. I'm sure something can be done but how involved is it going to be? Once it's stopped, does it start up again? And if so, what is the interval for that. There are subtle things that fall out of a good user interface for this kind of auto play, stopping, starting behaviour.

Bump this thread in several days to remind me if I've not pinged back.

I just got back from vacation recently and was glad to see your response.

I think the preferred behavior is that the auto-scroll stops indefinitely, until the page is refreshed or reloaded in the browser.  And the manual scroll (clicking on forward and back arrows) would not be affected either way (it would still work as usual).

 

Quote

Ok and my next question is, is there a way for the viewer to stop the scrolling action?

I have updated my code post. I added a kill upon user action.

Let us know how it goes.

I scrolled up and see you've provided a solution already.

It works!

Phenomenal -- thank you!

I'll have another (different) request / question soon, I'm sure  🙂
 

On 7/20/2021 at 9:42 PM, creedon said:

I had already added that feature to the code but that code was in a DM. Please see Auto Layout Right Arrow Auto Click.

Hi- this code works great, thank you! Is there a way to hide the arrows?

7 hours ago, Ekin said:

Is there a way to hide the arrows?

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.

16 hours ago, 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.

https://sphere-bassoon-s7rj.squarespace.com/epcs - the carousel is towards the bototm of page, and pw is kirankiran

On 12/21/2021 at 11:33 AM, Ekin said:

Is there a way to hide the arrows?

Add the following to Page Settings > Advanced > Page Header Code Injection for the page. Please see per-page code injection.

<style>
  
  /* desktop */
  
  [data-section-id="61c0e388d893993c573b2206"] .user-items-list-banner-slideshow .arrow-container,
  
  /* mobile */
  
  [data-section-id="61c0e388d893993c573b2206"] .user-items-list-banner-slideshow .mobile-arrows
  
    {
    
      display : none;
      
      }
      
  </style>

This is for v7.1.

Let us know how it goes.

27 minutes ago, creedon said:

Add the following to Page Settings > Advanced > Page Header Code Injection for the page. Please see per-page code injection.

<style>
  
  [data-section-id="61c0e388d893993c573b2206"] .user-items-list-banner-slideshow .arrow-container {
  
    display : none;
    
    }
    
  </style>

This is for v7.1.

Let us know how it goes.

Works great, thank you so much!

On 12/22/2021 at 11:31 AM, Ekin said:

Works great, thank you so much!

Hi- just noticed the arrows are still visible on mobile. Anyway it can be hidden across all breakpoints?

33 minutes ago, Ekin said:

just noticed the arrows are still visible on mobile. Anyway it can be hidden across all breakpoints?

I'm not seeing arrows on mobile. I checked my mobile emulation and on iPhone X.

Can you tell us more about the mobile device? OS? Browser? Do you have a screenshot?

30 minutes ago, Ekin said:

Sorry I was looking at a page I did not apply code to yet. Apologies!!

Looking over this again, actually I can't get it to work on mobile. The reason you were not seeing the arrows previously was because there was no second List Item content added. Currently- the arrows appear on mobile on homepage, /home2 and on /epcs pages. 

@Ekin

I have updated my code post.

There are also some variations that you can do on the code.

It can be made to effect all carousels on a single page.

<style>
  
  /* desktop */
  
  .user-items-list-banner-slideshow .arrow-container,
  
  /* mobile */
  
  .user-items-list-banner-slideshow .mobile-arrows
  
    {
    
      display : none;
      
      }
      
  </style>

For a site wide effect. Add the following to Design > Custom CSS.

/* desktop */

.user-items-list-banner-slideshow .arrow-container,

/* mobile */

.user-items-list-banner-slideshow .mobile-arrows

  {
  
    display : none;
    
    }

Let us know how it goes.

18 minutes ago, creedon said:

@Ekin

I have updated my code post.

There are also some variations that you can do on the code.

It can be made to effect all carousels on a single page.

<style>
  
  /* desktop */
  
  .user-items-list-banner-slideshow .arrow-container,
  
  /* mobile */
  
  .user-items-list-banner-slideshow .mobile-arrows
  
    {
    
      display : none;
      
      }
      
  </style>

For a site wide effect.

/* desktop */

.user-items-list-banner-slideshow .arrow-container,

/* mobile */

.user-items-list-banner-slideshow .mobile-arrows

  {
  
    display : none;
    
    }

Let us know how it goes.

This works great, thank you again!!

I've seen others ask if you can add the functionality of the slideshow to loop back after the last slide - did you ever add that to the code? I have your code installed on the site I'm working on and it looks great, just need it to loop back around at the end. Here's the site: https://www.dmelv.com/. Thanks!

On 2/7/2022 at 1:03 PM, kellyhuffs said:

did you ever add that to the code?

I have not added that feature in. I have tinkered with some code but there are some subtleties in how the images are being manipulated that, so far, I've not replicated.

Have you considered using the Infinite Scroll feature.

I have updated the code cited in my July 20, 2021 post earlier in this thread.

The code now works for slideshow banner and carousel auto layouts with no arrows.

Hi @creedon 

I can't seem to get code to work - any chance you could take a look? I've checked as well in an incognito window. I'm sure I must have missed something in the installation of the code. I'm not really very used to working with Java Script.

Its https://www.broadlough.ie/single-casks

Thanks so much

Ruth

8 hours ago, ruthob93 said:

I'm sure I must have missed something in the installation of the code.

You missed installing the following at Settings > Developer Tools > Code Injection > HEADER from the install steps.

<x-twc-alraac data-click-interval-seconds="6" data-kill-upon-user-action="true"/>

There are other settings detailed in the Install steps that can be used instead of the above configuration. It all just depends on what you want to accomplish.

@creedon thank you so much for pointing that out. I really appreciate it!