Reducing the height and add space in between images on one specific Gallery Slideshow: Reel only

Hey, 

Really hoping someone can help. I think I need some custom code. 

I have two Gallery Slideshow: Reels on the homepage of my website: https://www.weareutopia.co/ 

I want to reduce the height of the 'clients section' slideshow to roughly 100px. But keep the 'Values Reel' (further down the page) the same size it currently is. I also want the 'clients section' to auto scroll. 

Thanks in advance for any help! 🙂 

This is the custom code I have so far...

<script>
    /**
    *  Gallery Section Auto Scroller
    **/
  (function () {
    setAutoScroll({
      gallery: 1,
      direction: 2,
      timing: 1500,
    });

    /*
    * Copy and paste the above code
    * to target more auto-scrolling
    * sections
    **/

    /** gallery
    * gallery section order on the page. Ex:
    * 1 = the first gallery section on a page,
    * 2 = the second gallery section on a page
    **/

    /** direction
    * direction the gallery should go in.
    * 1 = backwards,
    * 2 = forwards
    **/

    /** timing
    * timing between each slide, in milliseconds. Ex:
    * 2000 = 2 seconds
    **/

    function setAutoScroll(settings) {
      function init() {
        let section = document.querySelectorAll(".page-section.gallery-section")[settings.gallery - 1];

        function clickArrow() {
          if (section && !document.querySelector("html.sqs-modal-lightbox-open") && !document.hidden && !document.querySelector("body.sqs-edit-mode")) {
            let arrow = section.querySelectorAll(".gallery-reel-control .gallery-reel-control-btn")[settings.direction - 1];
            if (arrow) arrow.click();
          }
        }

        window.setInterval(clickArrow, settings.timing);
      }

      window.addEventListener("DOMContentLoaded", init);
    }
  })();

</script>

<style>
.gallery-reel {
  height: clamp(75px, 25vw, 100px) !important;
  padding: 0px 0px !important;
}
</style>

Hey! It looks to me like you need to crop your images. All of the logos have a large bottom on them so the section can't get any smaller because of the images.

Also the autoplay is working for me, I didn't know if that was an issue you had or where just commenting on that!

Hey, 

Thanks for taking a look into this for me and for the speedy reply.

I've added the space at the bottom of all the logos as a quick fix to make them appear smaller. The blank space I've added takes up some of the minimum size height of the reel as it won't go any smaller. 

This isn't ideal though as it will be harder to add new clients and means there's a space at the bottom of the section.

Any other ideas please? 

The autoplay is working as intended. I wouldn't want any new code to effect how that is working. 

Amazing! Thank you sooooo much Tuanphan 😄