matthewk

Thanks Creedon,

I sent you that info in a PM.

Hi Creedon.  Do you know what the code or class name is for this icon?   so I can use that instead of  ?  Thanks~

Another question but about the slideshow reel.  Is there a way to make the images clickable to then show the full size of that image?

Thanks~

Has anyone been able to figure this one out?  Thanks

That worked!  Thank you.  For anyone else that wants the minimalist buttons and for the reel to scroll, this is what I used:

<script>

  $( ( ) => {
  
    // returns svg element
    
      buttonSvg = ( direction, points ) => {
      
        let $e = $( '<svg class="caret-' + direction + '-icon--small" viewBox="0 0 9 16">' +
        
          '<polyline fill="none" stroke-miterlimit="10" points="' + points + ' ">' +
          
            '</polyline>' +
            
          '</svg>' );
          
        return $e;
        
        }
        
    // simple class changer
    
      simpleClassChanger = ( old, nw ) => {
      
        $( '.' + old )
        
          .removeClass ( old )
          
          .addClass ( nw );
          
        }
        
    simpleClassChanger ( 'gallery-reel-controls', 'gallery-slideshow-controls' );
    
    // start previous button
    
      $( '.gallery-reel-control:nth-of-type( odd )' )
      
        .removeClass ( 'gallery-reel-control' )
        
        .addClass ( 'gallery-slideshow-control gallery-slideshow-control-prev' )
        
        .each ( function ( ) {
        
          $( 'svg', $( this ) ).replaceWith ( buttonSvg ( 'left',
          
            '7.3,14.7 2.5,8 7.3,1.2' ) );
            
          } );
          
      // end previous button
      
    // start next button
    
      $( '.gallery-reel-control:nth-of-type( even )' )
      
        .removeClass ( 'gallery-reel-control' )
        
        .addClass ( 'gallery-slideshow-control gallery-slideshow-control-prev' )
        
        .each ( function ( ) {
        
          $( 'svg', $( this ) ).replaceWith ( buttonSvg ( 'right',
          
            '1.6,1.2 6.5,7.9 1.6,14.7' ) );
            
          } );
          
      // end next button
        
    simpleClassChanger ( 'gallery-reel-control-btn', 'gallery-slideshow-control-btn' );
    
    simpleClassChanger ( 'gallery-reel-control-btn-icon',
    
      'gallery-slideshow-control-btn-icon' );
      
    } );
    
$(function(){
  window.setInterval(function(){
    {$("html:not(.sqs-modal-lightbox-open) body:not(.sqs-edit-mode-active, .sqs-edit-mode) .gallery-slideshow-control:nth-of-type(2) .gallery-slideshow-control-btn")
    [0].click()}     
  }, 2000);
});
</script>

Hi Creedon and all.  I want to use the code above for the custom arrows but I already have some code that makes the slideshow reel autoscroll.  When I add this code below that, the arrows are there but the autoscroll stops.  Any help would be so appreciated.  Thanks!

This is the code for the auto scroll.  The first part goes into the Page Header Advanced Settings and then the second part goes into the custom CSS 

<script   src="https://code.jquery.com/jquery-3.5.1.js"></script>

<script>

$(function(){

  window.setInterval(function(){

    {$("html:not(.sqs-modal-lightbox-open) body:not(.sqs-edit-mode-active, .sqs-edit-mode) .gallery-reel-control:nth-of-type(2) .gallery-reel-control-btn")

    [0].click()}     

  }, 2000);

});

</script>

CSS

[data-section-id='YOUR DATA SECTION ID']{
  .gallery-reel{
    height:20vh !important;
    padding-left: 0px;
    padding-right: 0px;

    figure{
    filter:grayscale(100%);
    }

    .gallery-reel-controls{
      display:none;
    }
  }
}