Beyondspace

It could be achieved with some custom javascript. - Each date within a year has a fixed text, right? - What is your current plan for Squarespace site?

Could you share the page url with the image? We can use the href attribute as css selector, but we need to know the exact image to select

Font family on my device is SIMPLO on both desktop and mobile view Is it correct the font you want to apply?

You can try the following CSS code .gallery-grid-image-link { opacity: 0.5; } .gallery-grid-image-link:hover { opacity: 1; transition: opacity 0.5s ease; } If you need to target a specific section/ID, you can add the ID to select only that ID Hope it can help

Can you share your site so we can take a look?

By the way, I checked your site that the font on desktop does not like the image you attach You should check your font file again. It should be the .tff file, something like this

I implement the following code on my demo site. If using only CSS code, we need some tricks to identify the active items and set the right style for them. section[data-section-id="65f9bec79401572f1c1198db"] .user-items-list-carousel__slide.list-item:not([aria-hidden]) { transform-style: preserve-3d; } section[data-section-id="65f9bec79401572f1c1198db"] .user-items-list-carousel__slide.list-item:not([aria-hidden])[style*="translate3d(0"] { transform: perspective(1000px) rotateY(-20deg) !important; transition: transform 0.5s ease; } section[data-section-id="65f9bec79401572f1c1198db"] .user-items-list-carousel__slide.list-item:not([aria-hidden])[style*="translate3d(914px"] { transform: translate3d(914px, 0, 0) perspective(1000px) rotateY(20deg) !important; transition: transform 0.5s ease; } section[data-section-id="65f9bec79401572f1c1198db"] is my section id My trick with the above CSS code is the style Squarespace is applying on active items: - translate3d(0 : is the first active item - translate3d(914px : is the third item If these values are changed, my code won't work properly. So if we need to implement this style logically without any tricks, it needs javascript code to observe the active items and provide the suitable custom style

You should contact the plugin author...

I think we can try the basic idea - using People section - Add custom Css for apply these above effect My demo testing

I check that the markdown works properly on my demo site. Can you share your site address so I can take a look?

Can you share your site so we can take a look?

Do you have any samples for the result you want to achieve?

For Gallery Section Slideshow: Full, the arrow selector is slightly different <script> // Wait for the DOM content to be fully loaded window.onload = function() { if (window.self !== window.top) { return; } // Function to simulate clicking the next arrow function clickNext(arrow) { arrow.click(); } var fullscreenSlideshows = document.querySelectorAll('.gallery-fullscreen-slideshow'); // Set auto-scrolling for each carousel fullscreenSlideshows.forEach(function(slideshow) { var intervalId; // Variable to hold the interval ID // Query all elements with the class for carousel next arrows const arrows = slideshow.querySelectorAll('.gallery-fullscreen-slideshow-control-btn'); arrows.forEach(function(arrow) { // Define a function to handle auto-scrolling for a specific carousel function autoScroll() { clickNext(arrow); } // Start the auto-scrolling for the current carousel if (arrow.getAttribute("aria-label") === "Next Slide") { // console.log('auto click next arrow'); intervalId = setInterval(autoScroll, 5000); } // Stop autoplay when the arrow is clicked arrow.addEventListener("click", function(e) { // Stop autoplay when it is user-triggered event if (e.offsetX || e.offsetY) { // console.log('user click') clearInterval(intervalId); } }); }); }); }; </script> cc @Laticauda

You can check Classic Gallery block, it allows insert Gallery blocks on your sections, free available

Check this answer to see if it works for you

This is tested against your site and it works <script> // Wait for the DOM content to be fully loaded window.onload = function() { if (window.self !== window.top) { return; } // Function to simulate clicking the next arrow function clickNext(arrow) { arrow.click(); } // Query all elements with the class for carousel next arrows var nextArrows = document.querySelectorAll('[data-test="gallery-reel-control-btn-next"]'); // Set auto-scrolling for each carousel nextArrows.forEach(function(arrow) { var intervalId; // Variable to hold the interval ID // Define a function to handle auto-scrolling for a specific carousel function autoScroll() { clickNext(arrow); } // Start the auto-scrolling for the current carousel intervalId = setInterval(autoScroll, 4000); // Stop autoplay when the arrow is clicked arrow.addEventListener("click", function(e) { // Stop autoplay when it is user-triggered event if (e.offsetX || e.offsetY) { clearInterval(intervalId); } }); }); }; </script> Place it in your Footer injection

First turn off the autoplay of Gallery Slideshow:simple section, this script will autoplay the gallery until user clicks on the next arrow <script> // Wait for the DOM content to be fully loaded window.onload = function() { if (window.self !== window.top) { return; } // Function to simulate clicking the next arrow function clickNext(arrow) { arrow.click(); } var fullscreenSlideshows = document.querySelectorAll('.gallery-slideshow'); // Set auto-scrolling for each carousel fullscreenSlideshows.forEach(function(slideshow) { var intervalId; // Variable to hold the interval ID // Query all elements with the class for carousel next arrows const arrows = slideshow.querySelectorAll('.gallery-slideshow-control-btn'); arrows.forEach(function(arrow) { // Define a function to handle auto-scrolling for a specific carousel function autoScroll() { clickNext(arrow); } // Start the auto-scrolling for the current carousel if (arrow.getAttribute("aria-label") === "Next Slide") { console.log('auto click next arrow'); intervalId = setInterval(autoScroll, 5000); } // Stop autoplay when the arrow is clicked arrow.addEventListener("click", function(e) { // Stop autoplay when it is user-triggered event if (e.offsetX || e.offsetY) { console.log('user click') clearInterval(intervalId); } }); }); }); }; </script> cc @D_Efinger

Try <script> // Check if the window is loaded window.onload = function() { if (window.self !== window.top) { return; } // Function to simulate clicking the next arrow function clickNext(arrow) { arrow.click(); } // Query all elements with the class for carousel next arrows var nextArrows = document.querySelectorAll(".summary-carousel-pager-next"); // Set auto-scrolling for each carousel nextArrows.forEach(function(arrow) { // Define a function to handle auto-scrolling for a specific carousel function autoScroll() { clickNext(arrow); setTimeout(autoScroll, 4000); // Set the next auto-scroll after 4 seconds } // Start the auto-scrolling for the current carousel autoScroll(); }); } </script> If you want all your summaries on your site to auto run, place this code in your site Footer injection. Otherwise place it into each Page code injection

Are you planning to keep subscription of the website railroadworkersunited.org? If not then you have to migrate the files unfortunately

Checkout our freebie that supports adding Gallery blocks on 7.1 sections, then you can mix youtube videos and image in your carousel Classic Gallery block Kapture 2024-03-09 at 10.42.43.mp4

are you talking about mobile or desktop screen?

Updated script to use plain Javascript and stops if it is in edit mode <script> if (window.self === window.top) { document.addEventListener("DOMContentLoaded", function() { setTimeout(function() { const nextButton = document.querySelector('.gallery-reel-control-btn[data-next]'); if (nextButton) { nextButton.click(); } }, 3500); }); } </script>

Install this script to add Gallery blocks to your section Classic Gallery block, it is available for Personal plan users via Tampermonkey script as well

You can use Gallery blocks to add a Carousel of Youtube video, check out Classic Gallery block

I created this freebie to unblock the gallery block for users, check Classic Gallery block. For those who are using Personal plan, the script is available as Tampermonkey script, too @CoorlasArchitecture @nparkdesigns Kapture 2024-03-09 at 10.42.43.mp4