LoE Posted April 12, 2023 Share Posted April 12, 2023 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. Link to comment
tuanphan Posted April 15, 2023 Share Posted April 15, 2023 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 LoE 1 Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
LoE Posted April 19, 2023 Author Share Posted April 19, 2023 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! Link to comment
tuanphan Posted April 22, 2023 Share Posted April 22, 2023 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> LoE 1 Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
LoE Posted April 24, 2023 Author Share Posted April 24, 2023 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! Link to comment
tuanphan Posted April 25, 2023 Share Posted April 25, 2023 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? Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
LoE Posted April 25, 2023 Author Share Posted April 25, 2023 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). Link to comment
LoE Posted April 25, 2023 Author Share Posted April 25, 2023 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> so know I only have to change for every new image the aspec ratio. but is a lot less hussle to do it on every new image then expect the site to do it.... Thank you so much for helping me out!!!! tuanphan 1 Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment