Excelsior Posted September 18, 2021 Share Posted September 18, 2021 (edited) 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. My Pen Copy: https://codepen.io/Verium/pen/KKqqmBB The Original Pen: https://codepen.io/flowrome/pen/abowVRE Edited September 18, 2021 by Excelsior Spelling error Link to comment
creedon Posted September 18, 2021 Share Posted September 18, 2021 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. 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
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment