Jump to content

How to create an Image slider for events (Summary block slider)

By raeroshow, in Customize with code

Go to solution Solved by raeroshow,

Recommended Posts

raeroshow Level 6

raeroshow

Posted
Posted

Site URL: https://www.kickstandcomedy.org/

 

On this website, https://www.elysiantheater.com/  - they have a slider showing upcoming events at the top of the home pages. It automatically goes from slide to slide. I want to do this on my site and am frustrated that I can't figure out how! I know you can do this manually with galleries but i specifically want it to auto-pull in Events so i need to use SUmmary blocks. 

7.1. Fluid Engine site 

Thanks!

 

*************************************
Let's Make a Website!
Rachel (she/her) | Squarespace Websites
Link to comment
  • Replies 3
  • Views 485
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Popular Days

Popular Posts

raeroshow
raeroshow

Site URL: https://www.kickstandcomedy.org/   On this website, https://www.elysiantheater.com/  - they have a slider showing upcoming events at the top of the home pages. It automatically goes f

HoaLT
HoaLT

we can use the Summary, but it has a limit with only 30 items in standard. To extend more item, you 'll need additional plugin: Lazy Summaries Block Plugin — Squarewebsites Plugins

raeroshow
raeroshow

I figured this out if anyone is curious. This code in the header does the trick. <!-- Carousel Autoplay --> <script> window.onload = function() { var nextArrow = document.querySelecto

Posted Images

HoaLT Level 6

HoaLT

Posted
Posted
14 hours ago, raeroshow said:

Site URL: https://www.kickstandcomedy.org/

 

On this website, https://www.elysiantheater.com/  - they have a slider showing upcoming events at the top of the home pages. It automatically goes from slide to slide. I want to do this on my site and am frustrated that I can't figure out how! I know you can do this manually with galleries but i specifically want it to auto-pull in Events so i need to use SUmmary blocks. 

7.1. Fluid Engine site 

Thanks!

 

we can use the Summary, but it has a limit with only 30 items in standard. To extend more item, you 'll need additional plugin: Lazy Summaries Block Plugin — Squarewebsites Plugins

image.png

Press 👍  or mark my comment as solution if you find my sharing useful

🆒 Squarespace pinchzoom lightbox plugin (affiliate link)

👁‍🗨 360 degree photo viewer (affiliate link)

Link to comment
  • Solution
raeroshow Level 6

raeroshow

Posted
  • Author
  • Solution
Posted

I figured this out if anyone is curious. This code in the header does the trick. 

<!-- Carousel Autoplay -->
<script>
window.onload = function() {
  var nextArrow = document.querySelector(".summary-carousel-pager-next");
  function clickNext() {
    nextArrow.click();
  }
  setInterval(clickNext, 5000);
};
</script>

 

*************************************
Let's Make a Website!
Rachel (she/her) | Squarespace Websites
Link to comment

Create an account or sign in to comment

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

Sign Up / Login
Go to topic listing

News

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Upcoming Webinars →

Hire a Designer

Stand out online with the help of an experienced designer or developer.

Get Matched →

Support

Community

Developers

Resources