Auto-scrolling/playing carousel with linked images

Hi everyone,

I am currently working on creating an engaging landing page for my graphic design portfolio website. Toward the bottom of the landing page (https://www.ellajenkinsdesigns.com/), I have an image carousel that features some of my works. Although it looks fine now, I was wondering if there was a way to make the carousel auto-scroll or auto-play, so the projects rotate by themselves when users are on the page. Also, is there a way to have each carousel image link to a specific page? I would like to have the projects featured on the carousel link to their respective project page when clicked. Thanks!

#1. Add to Settings > Advanced > Code Injection > Footer

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

#2. You can enable button on each items, then we can give code to turn button link to image link + code to hide button then

@tuanphan Thank you so much for the injection code! It looks great. I just noticed you mentioned something about enabling buttons for each item:

Quote

#2. You can enable button on each items, then we can give code to turn button link to image link + code to hide button then

Any tips on how to do this or the code to hide the buttons once created? Thanks again for all the help.

On 3/21/2023 at 8:40 PM, ejenks said:

@tuanphan Thank you so much for the injection code! It looks great. I just noticed you mentioned something about enabling buttons for each item:

Any tips on how to do this or the code to hide the buttons once created? Thanks again for all the help.

Hi,

You need to add it first, then we can help easier

In case your site is live & you can't do this. You can duplicate the page, enable it & share duplicated page url, we can also check there

@tuanphan Got it, thank you. I just added the buttons for each item and updated my homepage with them: https://www.ellajenkinsdesigns.com/

@tuanphan In addition to making the images in the carousel clickable, is there a way to slow down the sliding animation for the auto-play? I understand that I can adjust the time in between transitions, but I'm wondering if there's any sort of way to adjust the speed of the transition itself.

@tuanphan you ROCK!!! thank you so so much 😁🎊