Carousel w/ JS
Hello,
I'm trying to make a product carousel but I'm completely stuck on how to build / structure this. Basically, I want to display 5 products. Once NEXT button is clicked, slide and display the next 5 products. And vice versa with PREV button.
I found a demo online and have been trying to understand it. It was a bit buggy and I tried to fix some things for my likings, but it's still rather buggy.
I was wondering if anyone could possibly explain the logic for this as I'm completely confused and stuck and don't know how to go about fixing this.
Any input is appreciated. Thank alot
Buggy Demo - https://codepen.io/Matt-CopOffMatt/pen/OJqvqVg
(Tailwind + JS)
12 Replies
Line 13, you want to compare to
0 not scrollWidth. Also bring the buttons to the front, you can use z-index
Ah, and as for the buttons not hiding when you reach the end I would just rewrite the showHideIcons function entirely because you shouldn't be relying on a setTimeout when you should know when you click a button if you have reached the endI’m gonna hop back on in a half hour was pretty frustrated
Thank you for you input. ScrollWidth was used to determine how far the cards were moved. Why compare to 0?
If the scroll is 0, it means you're on the left side and so the left arrow is disabled
Understandable that it's frustrating, it's poor code
KPows tutorials are always better .
Working on it now
I’ve been trying to find a good tutorial on how to write a better version but I can’t find much on YT
Hi @Matt! I want to encourage you to continue building your carousel, specially if it helps you to learn new stuff. But I also hope I can help you by recommending this great library: https://www.embla-carousel.com/get-started/
I meant to also add this link to that message. The part one is just setting up the html and css which you can look at the html structure in the video it’s prob similar to what you have
https://youtu.be/gBzsE0oieio?si=eP_7-CUEy4K1EmA2
Kevin Powell
YouTube
How to code a carousel with HTML, CSS and JavaScript - from scratch...
In this video I take a look at setting up a carousel, sometimes called a slider, for a website. With the markup and the CSS already done, it's time to tackle the Javascript!
Zell's course: learnjavascript.today
Zell's course changed how I approach JS and made me much more comfortable with it, and with it only open for a limited time I was glad ...
I watched the entire video
Not sure how to go about writing this to work for 5 starting cards. (click and it changes to the other 5)
Should I define two row divs?
Yeah where KPow has each image, you would have each row (or whatever element you want to change on click)
I'm pretty close a solution right now
gonna post it here soon
https://codepen.io/Matt-CopOffMatt/pen/XWGYPEX
Read through alot of code and put this together. Gotta figure out how to get the dragging effect to work
Trying to recreate shopify carousels