Jump to content

Broker_Noob89

Member
  • Posts

    1
  • Joined

  • Last visited

Broker_Noob89's Achievements

Level 1

Level 1 (1/20)

0

Reputation

  1. 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.
×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.