Help with creating an automatic slideshow with clickable images and specific aspect ratio for website homepage

I want to have a slideshow on my homepage that automatically moves to the right every few seconds. Additionally, when clicking on a picture, the user should be redirected to another page.

I tried to create this using a gallery slideshow, but it didn't work. Unfortunately, I am not able to set the aspect ratio to 2/3.

Here is my page with a carousel (it is missing the automatic movement to the right and the redirect when clicking on a picture): https://www.martinmorscher.com/neu2

Here is my page with a gallery slideshow (it is missing the 2/3 aspect ratio and the appearance of neu2, as well as the automatic movement to the right): https://www.martinmorscher.com/neu3

Could someone please help me? It doesn't matter if it's neu2 or neu3, just whatever is the easiest to implement.

Thank you in advance.

https://www.martinmorscher.com/neu2

You can enable buttons, then we can give code to turn button link to image link (+code to hide buttons then)

With moves to the right every few seconds, you need to enable list arrows first, then we can give code easier

On 4/15/2023 at 1:22 PM, tuanphan said:

https://www.martinmorscher.com/neu2

You can enable buttons, then we can give code to turn button link to image link (+code to hide buttons then)

With moves to the right every few seconds, you need to enable list arrows first, then we can give code easier

Hey tuanphan,

thank you very much for helping out. I did turn on button link and linket my first element. what code do I need?

is it also possible to hide the arrows? 

thank you very much!

On 4/19/2023 at 9:50 PM, LoE said:

Hey tuanphan,

thank you very much for helping out. I did turn on button link and linket my first element. what code do I need?

is it also possible to hide the arrows? 

thank you very much!

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 = 1;
    
    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>
  
  /* As Seen in Logo carousel */
  <style>
  .user-items-list {
    padding: 0px !important;
}
.user-items-list-carousel__gutter {
    padding: 0 !important;
}
.desktop-arrows, .mobile-arrows {
    display: none;
}
</style>

On 4/22/2023 at 3:04 AM, tuanphan said:

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 = 1;
    
    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>
  
  /* As Seen in Logo carousel */
  <style>
  .user-items-list {
    padding: 0px !important;
}
.user-items-list-carousel__gutter {
    padding: 0 !important;
}
.desktop-arrows, .mobile-arrows {
    display: none;
}
</style>

 

Thank you! Now the slideshow works!

Now the only thing missing is that there is a link on top of the image. It should be the same link that the button at the bottom has. The buttons should also disappear. Can you also help me with this?

Thanks for the help so far!

On 4/24/2023 at 5:17 PM, LoE said:

 

Thank you! Now the slideshow works!

Now the only thing missing is that there is a link on top of the image. It should be the same link that the button at the bottom has. The buttons should also disappear. Can you also help me with this?

Thanks for the help so far!

I see no link, no button here. I see image + title only. Did you solve it?

1 minute ago, tuanphan said:

I see no link, no button here. I see image + title only. Did you solve it?

Unfortunately not. I tried, but I don't know if it's possible. I don't think it's possible because if you click on an image, you'll get the drag hand when you hover over the banner. Now I do have "Buttons" unter the Elements

The idea was: I click on an image and I get to a new page, without any buttons, just a click on the image.

I thought it would be possible to get something identical to a gallery block (like on https://www.martinmorscher.com/neu3).

OMG I got the solution....

I just use a gallery Block. Cut the picture so the right Aspec ratio and get an easy script for autoplay like this one:

 

<script>
(function() {
  var nextArrowGallery = document.querySelector('.gallery-reel-control-btn[data-test="gallery-reel-control-btn-next"]');
  
  function clickNextGallery() {
    nextArrowGallery.click();
  }
 
  setInterval(clickNextGallery, 3000);
})();
</script>