Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 6

Summary Block: How can I set the Carousel to "autoplay"?


jasonbarone
Go to solution Solved by clayyount,

Question

I love the new Summary Block carousel. I'm curious if it's possible to "autoplay" the carousel much like galleries can do. I know this is possible using Developer Platform galleries, but would love to be able to use with Block Carousels.

Edited by rhyann

Founder at Squarefront, the global community of Squarespace builders. I'm building products and services for the Squarespace platform and documenting everything on YouTube. I've been working with the platform since 2008 and my work with Squarespace led to me being hired by Uber where I spent over 5 years working on the web, design and content platform teams. 

Need help with Squarespace? Send me an email! Otherwise connect with me on TwitterInstagram, or Linkedin.

Link to post
  • Answers 106
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Popular Posts

Add to Page Settings > Advanced > Header <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script> <script> $(document).ready(function() {

--I'm not a coder-- but I mixed code from a couple of answers and got this to work in the updated 2019 SS. Note: It does not work in the preview and you have to view your site from an incognito window

@bheiberg change from 10000 to something like 5000 the lower, the faster "timeout":10000,  

Recommended Posts

  • 0

i think you would want to create another gallery variable. In the example above, he/she grabs the gallery using:var gallery = galleries[0];

So if you added another gallery (and it was the second gallery on the page) you might do something like:var gallery2 = galleries[1];

then do everything you did to 'gallery' to 'gallery2'

Link to post
  • 0

Does anyone know what the beginning part of the code does?? Y.on('domready', function () { var galleries = Y.Squarespace.GalleryManager.getGalleries();

What does 'Y.on' do? What does 'domready' do? and what does 'Y.Squarespace' do?

For some reason the 'domready' is screwing up my navigation bar when I am in mobile view. When I remove the 'domready' the navigation works fine. What exactly does 'domready' do and why would it cause only my mobile navigation to stop working?
Also the the carousel will not work without 'domready'

Edited by ASAP_aul
Initial Revision
Link to post
  • 0

Max . if you think Roy `s blog is amazing, on sunday I bought a new Saab 99 Turbo after having earned $7853 this - 4 weeks past and-a little over, $10k this past-month . it's realy the nicest-job I've had . I began this four months/ago and pretty much straight away began to earn at least $72, per-hour . learn the facts here now

=========== http://goo.gl/sNgdBv

Link to post
  • 0

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 post
  • 0

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 post
  • 0

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 post
  • 0

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 post
  • 0

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 post
  • 0
Guest

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 post
  • 0

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 post
  • 0

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 post
  • 0

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 post
  • 0
Guest

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 post
  • 0

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 post
  • 0

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?

Envolve Technical Solutions offers #IT support for residential and small business. Reach out to us to schedule a free consultation! We serve all the IT needs of residential and small business in Broomfield, Westminster, and surrounding areas in Colorado. 720-724-7708 or support@envolvetechnicalsoltuions.com

Link to post
  • 0

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 post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...