Jump to content

How to change summary block animation

Go to solution Solved by SaranyaDesigns,

Recommended Posts

Hi! In the top portion of my website I have a summary block slideshow that is pulling images from my blog. I would like to change the animation of this from sliding to fading in quickly if that makes sense. I watched a youtube video to get this code and hers does not have the sliding effect that mine has. I also do not want there to be arrows showing as well. Does anyone have code for this? This is the current code I have in the code injection header:

<!-- Summary Block Auto-Scroll -->


window.onload = function() {

  var nextArrow = document.querySelector(".summary-carousel-pager-next");

  function clickNext() {



  setInterval(clickNext, 4000);



A picture is attached of what I am talking about as well. Thanks in advance!

Screenshot 2023-11-15 at 4.17.18 PM.png

Link to comment
  • Replies 3
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

  • Solution

@lbencur25 it's possible you did but for some reason squarespace forum doesn't publicly display it unless you include the link in the body of the post... it's silly...

Anyway... It looks like the way this particular slider is built is that all the images are already loaded onto the page in one long line like a conveyor belt but hidden from view until the javascript moves them into the viewport... which is going to make it difficult to add a fade action instead of a slide action... it would be rewriting how the whole code block works.

You would start by absolutely-positioning all the image blocks on top of each other with CSS and then writing some javascript to cycle through the opacity or visibility of each block at whatever interval you want. That's beyond my skillset unfortunately, but maybe someone else here can help! sorry!


Link to comment

Create an account or sign in to comment

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

  • 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.