Leogant Posted June 23, 2016 Share Posted June 23, 2016 Hey. So code works fine, but I can't get my 9 pictures to show up. It always cuts off the last one and shows only 8. I anyway replaced the code with the "var totalGroups=carousel.get('totalGroups');" but does´t help. Thanks for feedback! Link to comment
Leogant Posted June 23, 2016 Share Posted June 23, 2016 Hey. So code works fine, but I can't get my 9 pictures to show up. It always cuts off the last one and shows only 8. I anyway replaced the code with the "var totalGroups=carousel.get('totalGroups');" but does´t help. Thanks for feedback! Link to comment
mimmylemoo Posted September 25, 2016 Share Posted September 25, 2016 Hi, I've added this code to a page on Ishimoto template, but it doesn't seem to have worked at all. The carousel is still doing that annoying backwards whizzing when it gets to the end of the images. Any tips/suggestions? Link to comment
CombatDocket Posted October 4, 2016 Share Posted October 4, 2016 Just wanted to thank you for this bit of code and function, I've implemented it throughout my site (combatdocket.com), and seen a marked improvement in visitor engagement and retention by providing a rotating summary carousel in several key places, very "eye catching", draws visits to other posts quite nicely. Link to comment
SypherVox Posted February 10, 2017 Share Posted February 10, 2017 I recently found a site that offers a plugins for that. It's actually pretty awesome. They offer a generator tool that has about 15 different animation options that you can control as well as animation delays and speed. It's probably exactly what you're looking for and more. You can find it here http://www.thecustomsquare.com/plugins/blogs/autoplay-carousel-block-plugin @jasonbarone Link to comment
kimberlyellen0731 Posted April 10, 2017 Share Posted April 10, 2017 @ghostcat I have used this code on multiple sites with no issues, however cannot seem to get it to work on this site. For the summary block on the sidebar titled "Hear From Our Clients" Any thoughts? Link to comment
kimberlyellen0731 Posted May 3, 2017 Share Posted May 3, 2017 @ghostcat also trying to use this code on this site here and it is working on all pages but the home page. Assuming that is because on the home page there is another gallery block above it. What is the fix to get this to work for only the second gallery? Link to comment
barney Posted May 24, 2017 Share Posted May 24, 2017 Thanks for the code @ghostcat @WTCOC Is it possible for this to work on a page within an index? I'm using the Clay template and I have a couple of Carousel blocks on the homepage, which are part of an index, that I would love to have scrolling. When I view the pages outside of the index the auto scrolling works (with the code in this thread) but not within in the index. If anyone could help I would be so grateful. Link to comment
Guest Posted May 30, 2017 Share Posted May 30, 2017 This really helped me out — thanks!Is it possible to make this loop when you reach the end, instead of scrolling back to slide 1?So the first slide would be on the right side of the last slide, and it would just start over Link to comment
Ten17 Posted June 21, 2017 Share Posted June 21, 2017 @barney You have to put the code in the index page for it to work on a page that's part of an index Link to comment
NicolaiP Posted June 29, 2017 Share Posted June 29, 2017 Hi there. I'm having a problem with this code. It won't loop. Instead, after my last review, it goes to a blank slot. Any ideas? Thanks!! Link to comment
socialxdata Posted September 22, 2017 Share Posted September 22, 2017 @ghostcat Love this! So awesome. Loop is not functioning properly - have on test here. Any ideas?touraineapts.com/sxdgalleryembedoptions Link to comment
WTCOC Posted November 13, 2017 Share Posted November 13, 2017 @benf @socialxdata @barney This code is working. <script> Y.on('domready', function () { var galleries = Y.Squarespace.GalleryManager.getGalleries(); var duration = 4000; var gallery=galleries[0]; var carousel=gallery["gallery-design"]; var totalGroups=carousel.get('totalGroups'); var currentGroup=0 var container=gallery.get("container"); var nextBtn=Y.one(gallery.get("elements.next")._nodes[0]).on("click",function(e){ e.preventDefault(); e.stopPropagation(); advanceCarousel() }) var prevBtn=Y.one(gallery.get("elements.previous")._nodes[0]).on("click",function(e){ e.preventDefault(); e.stopPropagation(); backupCarousel() }) Y.one(container._node).get('parentNode').on("mouseover",function(){ clearInterval(myInterval) }) Y.one(container._node).get('parentNode').on("mouseout",function(){ clearInterval(myInterval) setMyInterval() }) var myInterval; function setMyInterval(){ myInterval = setInterval(function(){ advanceCarousel() },duration) } setMyInterval(); function advanceCarousel(){ if(currentGroup==(totalGroups-1)){ currentGroup=0; }else{ currentGroup++; } carousel.goToGroup(currentGroup); } function backupCarousel(){ if(currentGroup==0){ currentGroup=totalGroups-1 }else{ currentGroup--; } carousel.goToGroup(currentGroup); } }); </script> Link to comment
Guest Posted December 1, 2017 Share Posted December 1, 2017 I can confirm that the code from @WTCOC is working. Furthermore, if you want to add a source to your testimonial slider, simply paste the person's name into the Tags field, and then when you set your Summary Block, Choose Primary Metadata = Tags. Here's some custom code to stop the tags being clickable, and also to add a long dash before the tag/person's name: .summary-metadata-item--tags a:before { content: "– "; } .summary-metadata-item--tags a{ pointer-events: none; cursor: default; } Link to comment
Guest Posted December 1, 2017 Share Posted December 1, 2017 And here's some more to add curly quotes before/after the excerpt, if you don't wanna type them every time: .sqs-block-summary-v2 .summary-excerpt p:before { content: "“"; } .sqs-block-summary-v2 .summary-excerpt p:after { content: "”"; } Link to comment
chazmdc Posted December 11, 2017 Share Posted December 11, 2017 Okay this works great. However it only seems to work for the first carousel on the page - is there somewhere to have it work for all carousels? Link to comment
Ten17 Posted December 21, 2017 Share Posted December 21, 2017 Sadly something is up with the "thecustomersquare.com" code - I had used it successfully all year and it totally broke a client site starting on Monday. Brine / Rally template. No response from support @ The Custom Square :( Link to comment
Ten17 Posted December 21, 2017 Share Posted December 21, 2017 @WTCOCI've got an index page with mutliple pages and several summary carouselI only want the auto play to affect the first and lastAny suggestions? http://www.homeirastyle.com Link to comment
Guest Posted January 19, 2018 Share Posted January 19, 2018 Thanks @WTCOC, that code works for me. Two questions though - 1) is there a way to make it shift only one image at a time, rather than all at once? and 2) is there a way to make it display only one column when viewed on mobile? Thanks in advance for your guidance! Link to comment
emae Posted January 31, 2018 Share Posted January 31, 2018 SOLUTION FOR MULTIPLE GALLERIES Using the code from @WTCOC, you can hack the autoplay to work on multiple galleries by duplicating the whole code and replacing one line: In the duplicated code, change: var gallery=galleries[0]; to: var gallery=galleries[1]; You should be able to do this as many times necessary for the number of galleries on your page by repeating the code and changing the number. It may not be the most concise approach but it get's the job done with little effort, especially if you're not comfortable modifying the body of the code! Link to comment
aakriti Posted March 21, 2018 Share Posted March 21, 2018 Hi @wtcoc @benf @ghostcat,I've tried this code (this one here => Answer by WTCOC · Nov 13, 2017 at 04:24 PM) and the very first one on this post by @ghostcat and it seems to work on my site while I'm logged in inside Squarespace, but when I test it from the out, it doesn't scroll.I'm using Bedford. Also, I don't even need it to loop - would be great, but not fussed about the loop. It can be a simple autoplay for my summary carousel (of testimonials saved as 'blogs'). Could you help? Here's the page in question: innovatorsbox.comThanks in advance. Link to comment
Guest Posted April 28, 2018 Share Posted April 28, 2018 (edited) In case someone wants to customize a specific gallery, you can find it by section name. You can make a section with a slug, for example: "home-testimonials". Then, find the gallery that resides inside this container. Example: <script> Y.on('domready', function () { try { var container = Y.one("#home-testimonials"); var gallery = Y.Squarespace.GalleryManager.getGalleryByContainer(container); gallery.setAttrs({ "autoplay":true, "autoplayOptions": { "timeout":20000, "randomize": true } }); } catch (e) { console.error("Could not configure Gallery autoplay.", e); } }); </script> Edited April 28, 2018 by Guest Initial Revision Link to comment
Guest Posted June 29, 2018 Share Posted June 29, 2018 It works great but it scrolls between the gallery entries way too fast. If you change the duration variable it just changes the rate at which the gallery transitions between slides. Does anyone know how to add a pause in between changes? So after it switches to a new item, wait X amount of seconds? Also is there a way to temporarily disable the function when a user manually clicks the scroll to the next gallery item? Link to comment
dansturm Posted January 8, 2019 Share Posted January 8, 2019 I've been using this code for a few years now and it seems that it just recently broke on [my site][1]. I didn't initially notice the carousel had broken, but that my top navigation links had disappeared, a bug that I've encountered before with bad code injection. I haven't been able to figure out how to fix the carousel but by changing the first line from Link to comment
Leogant Posted January 14, 2019 Share Posted January 14, 2019 Sorry guys but the code causes trouble with the menu and especially wit5h the mobile menu with Avenue theme. 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