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
Zoë
Zoë10mo ago
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 end
Matt
Matt10mo ago
I’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?
Zoë
Zoë10mo ago
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
clevermissfox
clevermissfox10mo ago
KPows tutorials are always better .
Matt
Matt10mo ago
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
Daryl
Daryl10mo ago
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/
www.embla-carousel.com
Get Started
Get started with Embla Carousel.
clevermissfox
clevermissfox10mo ago
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 ...
Matt
Matt9mo ago
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?
clevermissfox
clevermissfox9mo ago
Yeah where KPow has each image, you would have each row (or whatever element you want to change on click)
Matt
Matt9mo ago
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
Matt
Matt9mo ago
Trying to recreate shopify carousels
Want results from more Discord servers?
Add your server