JessM1 Posted October 11, 2021 Share Posted October 11, 2021 On 11/3/2020 at 5:19 AM, tuanphan said: change this line .summary-carousel-pager-next to #summary-block-id .summary-carousel-pager-next Find id with this tool https://chrome.google.com/webstore/detail/squarespace-collectionblo/bggpdfnccodbnmcndckmeehdjkjojkde @tuanphan Heya - just tried this now and it hasn't worked for me - have attached what my footer code section looks like. Have I done this correctly? 🙂 Link to comment
tuanphan Posted October 13, 2021 Share Posted October 13, 2021 On 10/12/2021 at 1:02 AM, JessM1 said: @tuanphan Heya - just tried this now and it hasn't worked for me - have attached what my footer code section looks like. Have I done this correctly? 🙂 between " and block-yui... is a # it should be #block-yui_3.... Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
JessM1 Posted October 14, 2021 Share Posted October 14, 2021 On 10/13/2021 at 8:50 AM, tuanphan said: between " and block-yui... is a # it should be #block-yui_3.... Just tried that - it's not working and the code is now showing up in red which I thought meant error? 🤔 Please see attached. Thanks v much for your help on this! Link to comment
tuanphan Posted October 15, 2021 Share Posted October 15, 2021 22 hours ago, JessM1 said: Just tried that - it's not working and the code is now showing up in red which I thought meant error? 🤔 Please see attached. Thanks v much for your help on this! see carefully first " and last " They seems different Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
Terrain4Print Posted February 9, 2022 Share Posted February 9, 2022 I got the original solution to work. Just had to inspect the button, find the topmost div, take a good class name from it. I chose: user-items-list-carousel__arrow-button--right Worked like a charm. But I don't like that it will never pause. It should autoscroll until the user hovers one of the icons. Then the scrolling should stop for 2 minutes. Will try to fix that. Link to comment
Nick_SquareKicker Posted March 10, 2022 Share Posted March 10, 2022 On 9/19/2020 at 9:51 AM, rebeccagracedesigns said: **UPDATED*** For anyone still looking, I found a workaround for autoplaying a Summary Carousel Block. It autoclicks the next button every three seconds. Inject this is Settings > Advanced > Code Injection > Footer <script> window.onload = function() { var nextArrow = document.querySelector(".summary-carousel-pager-next"); function clickNext() { nextArrow.click(); } setInterval(clickNext, 3000); }; </script> I updated this code to remove the use of JQuery (for page speed reasons) as well as to help with the refresh timeframe. Hi @rebeccagracedesigns, I've gotten a few customer support tickets from SquareKicker customers complaining about Squarespace not working because the SK UI keeps closing. I found this code above was the issue and after searching google for it, it lead me here. Because it initiates a "Click" every 3-5 seconds, when in EDIT MODE when you open something on Squarespace, (SQSP UI or even Add Section) 3 seconds later it closes. This is because the code above is simulating a click on the screen which force closes the UI. It also should only be in the header injection of a page with a carousel NOT the footer, otherwise your websites console triggers an error every 3 seconds, which is not great for SEO or performance. This code really needs to be wrapped in "Do not run this if the page is in Edit Mode." See code update below: NOTE: For Squarespace 7.1 (untested on 7.0) <script> if $( 'body.sqs-edit-mode-active').length ) { window.onload = function() { var nextArrow = document.querySelector(".summary-carousel-pager-next"); function clickNext() { nextArrow.click(); } setInterval(clickNext, 3000); }; } </script> caseypr and sorca_marian 2 Hi, I'm Nick, CEO & Co-Founder at squarekicker.com. Take your Squarespace sites to the next level with SquareKicker's No-Code Design & Animation Extension. Break free from templates & complex code and start building unique websites that you are proud to show your clients without ever having to write a single line of code. Squarespace Extension ● Templates ● News ● Inspiration ● Tutorials ● Resources Link to comment
Jeremyn Posted March 3, 2023 Share Posted March 3, 2023 Hi there, I would like to auto-scroll all gallery reels from this page: https://www.creativeportrait.net.au/studio-and-location I have the code below but it auto-scroll only the 1st gallery: <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> Link to comment
tuanphan Posted March 6, 2023 Share Posted March 6, 2023 On 3/3/2023 at 2:23 PM, Jeremyn said: Hi there, I would like to auto-scroll all gallery reels from this page: https://www.creativeportrait.net.au/studio-and-location I have the code below but it auto-scroll only the 1st gallery: <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> Use thsis new code <script> (function docReady(fn) { // see if DOM is already available if (document.readyState === "complete" || document.readyState === "interactive") { // call on next available tick setTimeout(fn, 1); } else { document.addEventListener("DOMContentLoaded", fn); } })(() => { if ( window.location == window.parent.location ) { const reelControl = document.querySelector('.gallery-reel-control [aria-label="Next Slide"]'); if (reelControl) { (function reelTimer() { setTimeout(() => { reelControl.click(); reelTimer(); }, 2000); // change this value to change the speed })(); } } }); </script> Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
Jeremyn Posted March 6, 2023 Share Posted March 6, 2023 Thank you for sending the new code Tuan. I tried it out by adding it to the advanced setting of the page but only the first gallery is going on auto-scroll. Any idea where the problem is? Link to comment
tuanphan Posted March 8, 2023 Share Posted March 8, 2023 On 3/6/2023 at 2:03 PM, Jeremyn said: Thank you for sending the new code Tuan. I tried it out by adding it to the advanced setting of the page but only the first gallery is going on auto-scroll. Any idea where the problem is? Try this new code, to bottom of Code Injection > Footer <script> jQuery(document).ready(function($){ setInterval(function(){ $('.gallery-reel-control-btn[data-next]').click() },2000); }) </script> Jeremyn 1 Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
Jeremyn Posted March 8, 2023 Share Posted March 8, 2023 And again THANK YOU so much Tuan for being so helpful! tuanphan 1 Link to comment
Jeremyn Posted March 13, 2023 Share Posted March 13, 2023 Hi Tuan, I just realise now that the previous code closes the edit section window automatically when I open them. How can I please fix this? Link to comment
tuanphan Posted March 16, 2023 Share Posted March 16, 2023 On 3/13/2023 at 11:10 AM, Jeremyn said: Hi Tuan, I just realise now that the previous code closes the edit section window automatically when I open them. How can I please fix this? Suppose your site url is: jeremyn.squarespace.com You can access this link: jerymyn.squarespace.com/config/safe It will disable custom code in Edit Mode, so you can edit everything easier Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
Jeremyn Posted March 16, 2023 Share Posted March 16, 2023 My site is creativeportrait.net.au or https://squid-echidna-882a.squarespace.com/ You are also a contributor to it. Link to comment
tuanphan Posted March 19, 2023 Share Posted March 19, 2023 On 3/16/2023 at 6:11 PM, Jeremyn said: My site is creativeportrait.net.au or https://squid-echidna-882a.squarespace.com/ You are also a contributor to it. You can access this link, it will disable code in edit mode, so you can edit everything it https://squid-echidna-882a.squarespace.com/config/safe Jeremyn 1 Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
KristenRuthSmith Posted March 24, 2023 Share Posted March 24, 2023 @tuanphan I have 3 slider gallery sections on my page (7.1), and I want the top and bottom to auto-scroll to the right while the middle gallery auto scrolls to the left. I've tried messing around with the various codes shared on this thread but I can't get it to work. Any help would be appreciated! Link to comment
tuanphan Posted March 25, 2023 Share Posted March 25, 2023 On 3/24/2023 at 11:31 AM, KristenRuthSmith said: @tuanphan I have 3 slider gallery sections on my page (7.1), and I want the top and bottom to auto-scroll to the right while the middle gallery auto scrolls to the left. I've tried messing around with the various codes shared on this thread but I can't get it to work. Any help would be appreciated! Can you share link to this page? I think we can use script code to enable that Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
KristenRuthSmith Posted March 29, 2023 Share Posted March 29, 2023 (edited) On 3/25/2023 at 3:37 PM, tuanphan said: Can you share link to this page? I think we can use script code to enable that @tuanphan firefly-media.squarespace.com PW: TempPassword Edited March 30, 2023 by KristenRuthSmith to direct the comment to @tuanphan Link to comment
tuanphan Posted April 3, 2023 Share Posted April 3, 2023 On 3/30/2023 at 6:51 AM, KristenRuthSmith said: @tuanphan firefly-media.squarespace.com PW: TempPassword Thank you. Can you arrow arrows? (We will give code to make arrows invisible then) Enable arrows, we can use script code to make it click arrows automatically Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
KristenRuthSmith Posted April 5, 2023 Share Posted April 5, 2023 (edited) On 4/2/2023 at 7:15 PM, tuanphan said: Thank you. Can you arrow arrows? (We will give code to make arrows invisible then) Enable arrows, we can use script code to make it click arrows automatically @tuanphan Done! Edited April 5, 2023 by KristenRuthSmith add @tuanphan Link to comment
tuanphan Posted April 8, 2023 Share Posted April 8, 2023 On 3/30/2023 at 6:51 AM, KristenRuthSmith said: @tuanphan firefly-media.squarespace.com PW: TempPassword Add this code to Settings > Advanced > Code Injection > Footer <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script> <script> $(function(){ window.setInterval(function(){ {$('[data-section-id="63f3a0f3f7b083322f9f0056"] .gallery-reel-control:nth-of-type(2) .gallery-reel-control-btn, [data-section-id="63f3a3fb07ed8a1026e55936"] .gallery-reel-control:nth-of-type(2) .gallery-reel-control-btn') [0].click()} }, 2000);window.setInterval(function(){ {$('[data-section-id="63f3a3f8d8dcfa5d15f7b29d"] .gallery-reel-control:nth-of-type(1) .gallery-reel-control-btn') [0].click()} }, 2000); }); </script> Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
sanchez_77 Posted June 2, 2023 Share Posted June 2, 2023 I've tried a few of the scripts mentioned in this thread but can't get any of them to work... The sensitive nature of my site contents prevents me sharing links on a public forum which makes debugging near impossible. I wanted to automatically scroll one testimonial section but after not managing to get this working I decided to try it globally and then edit it from there. Globally it fails too... I'm a bit stuck! Link to comment
tuanphan Posted June 3, 2023 Share Posted June 3, 2023 On 6/2/2023 at 8:11 PM, sanchez_77 said: I've tried a few of the scripts mentioned in this thread but can't get any of them to work... The sensitive nature of my site contents prevents me sharing links on a public forum which makes debugging near impossible. I wanted to automatically scroll one testimonial section but after not managing to get this working I decided to try it globally and then edit it from there. Globally it fails too... I'm a bit stuck! Can you share link to page where you use testimonials? Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
sanchez_77 Posted June 6, 2023 Share Posted June 6, 2023 (edited) On 6/3/2023 at 11:46 PM, tuanphan said: Can you share link to page where you use testimonials? I have a site wide PW but with this it opens up everything. Is there another way for me to share it not in a public forum? Edited June 8, 2023 by sanchez_77 Link to comment
tuanphan Posted June 9, 2023 Share Posted June 9, 2023 On 6/6/2023 at 9:29 PM, sanchez_77 said: I have a site wide PW but with this it opens up everything. Is there another way for me to share it not in a public forum? You can send via private message Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment