sunshinefuntimes Posted May 18, 2022 Share Posted May 18, 2022 Site URL: http://overdrive.rocks After browsing the forum for a solution to autoplay the header carousel on our site (https://www.overdrive.rocks/), I added the custom script below. This worked, however, I want to now turn off the nav arrows and if I disable them, the autoplay stops working. How can I get the banner to autoplay AND remove the nav arrows? Thanks! <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.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 = 6; 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> abisquarespace 1 Link to comment
tuanphan Posted May 20, 2022 Share Posted May 20, 2022 You can make arrows transparent by adding this to Design > Custom CSS body.homepage .user-items-list-banner-slideshow .user-items-list-banner-slideshow__arrow-icon { opacity: 0; } 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
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment