How can I change the arrow style in a 'reel gallery' on version 7.1?

Site URL: http://www.studiolilykate.com/

Hey guys and gals, I'm wanting to know if there is a way to change the arrows that seem to be default and the only option when you select the 'reel slideshow' in version 7.1.
I'd like to change them to the more minimalist style arrow available though the other gallery options slideshow full & simple & not have the transparent box that backs it. 
(I've attached a picture of the section on my website and the default arrows that it comes with.)
Thank you in advance for anyone who has the answer!

Lily 
xx

To implement the following you will need the business plan or above

Please see Gallery Section Reel Style Buttons to Slideshow Simple.

The cited code is for a v7.1 site using a gallery type of slideshow reel.

If you want the effect site wide then the above code would probably need to be adapted. I didn't test for that scenario.

I also didn't test on mobile.

Basically what the code is doing is updating the classes used for the reel style buttons to the styles for slideshow simple. In addition it replaces the SVG for the reel button icon with the slideshow simple icon.

Let us know how it goes.

Say I noticed a small visual issue with your kinds works section. The left and right quotes where chopped a bit.

I suggest starting a new question if you need help with that issue.

Tadaaaaa! You are a genius! FYI it worked across my full website - Thank you 😄
I'm so glad we have helpful developers here-really appreciate it!
For the kind words section I could start another thread, I didn't realise there was a way to stop the cut off on the sides as you panned through!

Cheers,
Lily

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;
    }
  }
}

@matthewk

My guess is that the problem occurs because my code is changing the class which controls the shape of the arrow.

.gallery-reel-control-btn is being changed to gallery-slideshow-control-btn

You would need to change the auto scroll code similarly.

Let us know how it goes.

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>

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~

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

@matthewk

Not off the top of my head by visual identification.

Can you provide a URL for a page for the first image or tell us which type of gallery it is? Also which version of SS?

A URL to a page is worth a thousand words! 🙂

Thanks Creedon,

I sent you that info in a PM.

On 4/1/2021 at 11:22 AM, matthewk said:

Thanks Creedon,

I sent you that info in a PM.

Would you mind sharing the fix publicly? I would also like the Icon you prefer.

On 3/31/2021 at 9:32 PM, creedon said:

@matthewk

Not off the top of my head by visual identification.

Can you provide a URL for a page for the first image or tell us which type of gallery it is? Also which version of SS?

A URL to a page is worth a thousand words! 🙂

Did you ever solve for this question, I'd love to know as well. Thanks!

Hey, @creedon, thanks so much for helping with this. Is there a way to center the <> reel slideshow arrows instead os having them appear on the far left/right side of the images? Also, can the arrows be centered above the gallery images instead of below? I'm looking to replicate the position of the Arrows from my Summary Block in the image attached.

Thanks!

10 hours ago, Romeo said:

Hey, @creedon, thanks so much for helping with this. Is there a way to center the <> reel slideshow arrows instead os having them appear on the far left/right side of the images? Also, can the arrows be centered above the gallery images instead of below? I'm looking to replicate the position of the Arrows from my Summary Block in the image attached.

Thanks!

If you share link to page where you use reel, we can help easier

10 hours ago, tuanphan said:

If you share link to page where you use reel, we can help easier

@tuanphan, here you go:

https://feed.squarespace.com/
Pw: feed

On 4/1/2022 at 1:54 PM, Romeo said:

Is there a way to center the <> reel slideshow arrows instead os having them appear on the far left/right side of the images? Also, can the arrows be centered above the gallery images instead of below?

Please see Gallery Block Carousel Arrows Top Center.

Let us know how it goes.

Hey, @creedon, thanks for the help, but your CSS (Gallery Block Carousel Arrows Top Center) affected the arrows on all the galleries except for 'Slideshow:Reel', which I customized using your code Gallery Section Reel Style Buttons to Slideshow Simple.

Currently the arrows are on the far left/right of this 'Slideshow:Reel' component:

I'd like them to appear centered and above the content like my 'Summary' section below:

I hope this is clear, thanks again.

3 hours ago, Romeo said:

your CSS affected the arrows on all the galleries except for 'Slideshow:Reel',

Please see Gallery Section Reel Arrows Top Center.

Let us know how it goes.

@creedon, you're the man! The updated CSS paired with your Gallery Section Reel Style Buttons to Slideshow Simple code, works great and achieves the style I'm after. Thanks so much for all your continued help and support.

Cheers,