Jump to content

Need Assistance with Javascript -> CSS

Recommended Posts

Hello Squarespace Community,
 
I've been trying to figure out how to recreate a visually similar or identical image carousel using only CSS and HTML. The current code uses Javascript to create class selectors when certain options are set to true or false. My codepen comes from a fork of the original below. As you can see I won't be needing bullet-containers or bullet classes in general since I removed the bullets from my fork. I just want a simple carousel that slides from clicking the arrows and has the transform property for 'previous' and 'next' images so they appear in grayscale behind the primary focused image. Automatic scrolling would be a huge bonus and would complete my project 100%. Please let me know if anyone has suggestions or if someone very generous could help me rewrite this properly. Thank you all for your help and I'll be checking back here for updates frequently.
 
 
Edited by Excelsior
Spelling error
Link to comment
  • Replies 1
  • Views 328
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Posted Images

It appears you have a pretty good start. It looks like you have the gray effect handled when the images are not in front.

You can do something like the following for a simple automatic right arrow click.

1201697795_ScreenShot2021-09-18at12_46_48PM.png.e25d2dc2d9239efd0d49daff6c54b2cf.png

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

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.