Broker_Noob89

On 5/18/2021 at 4:23 PM, helloVlad said:

At the moment I'm using scale:

.gallery-reel-item img {
    transform: scale(.9);
}

 

I used this combined with code from another site to achieve my desired outcome.  I wanted to make an auto scrolling bar down the bottom with logos to run through and found some solutions would crop the images and make it a little frustrating to deal with. Solution for my fix:

FOR AUTO SCROLLING:

PAGE>ADVANCED>CODE INJECTION (ADJUSTABLE CODE IS BOLD)

Gallery:  1 will select the first reel on your page. Change to 2/3/4 etc if multiple on the page.
Direction: 1 for right, 2 for left scroll
Timing: In milliseconds. 3000 for 3 second scroll.

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

    /*
    * 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>

To then adjust image sizes and padding (use the scale to adjust size of images)

DESIGN>CUSTOM CSS

[data-section-id="INSERT SECTION ID NUMBER HERE"].gallery-reel {
 padding-right:0px;
 padding-left:0px;
  height:20vh !important;
  
  .gallery-reel-item img {
    transform: scale(.75);
}
}

It is best practice to ensure the images are all the same size image to ensure this works as you desire.