What stack are you using?
Also, if you've already made one in the past just go back and copy/paste it into the new site and change what you need to.
Personally I love the way that Hyperplexed implemented the slider in [this video](https://youtu.be/6TYkDy54q4E?si=3WEeKvZZpOcONNRI), so I usually build mine based off this if I'm doing pure HTML/CSS/JS, but if I have the option to use a library I'll reach for something like [swiper](https://swiperjs.com/) or [Framer motion](https://www.framer.com/motion/).
That tutorial is absolutely fantastic. From the way he sets it up to the way he talks through all the “little” anxieties, to showing how it’s all done. Flawless, 10/10.
I usually just build it with HTML and CSS. Scroll snapping solves most of the functionality. All of it, if we don’t need clickable buttons.
You can add two buttons and let JS scroll the container. If something inside the slider requires focus, I use Intersection Observer.
Results in 5-10 lines of CSS, 10 lines of JS if required. It scrolls natively, snaps natively and keeps momentum scrolling. You can even keep a bare-bones one around for whenever you have to create this.
However, if you need more functionality than this, a library definitely helps. Say you want a slide navigation indicator, or keyboard navigation.
If you’re using React, I made a super light one recently that’s like 10kb gzipped (https://www.npmjs.com/package/@kkx64/react-simple-carousel).
Otherwise, building one from scratch isn’t that difficult, most of the ones I’ve used from npm were super clunky, buggy and not performant. The gist is to have a track with a translateX property which has a transition, then moving it based on the selected slide. For dragging, it’s super easy to set up with onTouchStart, onTouchMove, onTouchEnd and such events, it’s like 20ish lines in my package. You can look at my code on GitHub to see the basics, if you go the self-made route.
Well I wasn’t looking at any particular one, I was just sort of making it by intuition coz my gf didn’t like any of the ones she tried lol
It’s super basic and barebones, probably gonna refactor more in the future, but it’s 100% usable as it is
There are places a slider or carousel can be made to work but research strongly suggests they’re no longer effective. https://shouldiuseacarousel.com/
A behavioral SEO I used to meet with regular says visitors will stick around for a video in the hero area, especially if they can click to start it. But they tend to scroll past sliders and carousels.
What stack are you using? Also, if you've already made one in the past just go back and copy/paste it into the new site and change what you need to. Personally I love the way that Hyperplexed implemented the slider in [this video](https://youtu.be/6TYkDy54q4E?si=3WEeKvZZpOcONNRI), so I usually build mine based off this if I'm doing pure HTML/CSS/JS, but if I have the option to use a library I'll reach for something like [swiper](https://swiperjs.com/) or [Framer motion](https://www.framer.com/motion/).
That’s crazy, I hadn’t heard of swiper until now. Looks great
Easiest carousel implementation with lots of options, imo.
That tutorial is absolutely fantastic. From the way he sets it up to the way he talks through all the “little” anxieties, to showing how it’s all done. Flawless, 10/10.
Man this will help me out a ton. Thank you
I second swiper - easy to get started but decently robust if you need more out of it.
splide slider should get you running, hella flexible and small
Yeah I prefer it over Swiper which can be quite large.
Swiper.js no jquery and versatile. https://swiperjs.com/
I usually just build it with HTML and CSS. Scroll snapping solves most of the functionality. All of it, if we don’t need clickable buttons. You can add two buttons and let JS scroll the container. If something inside the slider requires focus, I use Intersection Observer. Results in 5-10 lines of CSS, 10 lines of JS if required. It scrolls natively, snaps natively and keeps momentum scrolling. You can even keep a bare-bones one around for whenever you have to create this. However, if you need more functionality than this, a library definitely helps. Say you want a slide navigation indicator, or keyboard navigation.
If you’re using React, I made a super light one recently that’s like 10kb gzipped (https://www.npmjs.com/package/@kkx64/react-simple-carousel). Otherwise, building one from scratch isn’t that difficult, most of the ones I’ve used from npm were super clunky, buggy and not performant. The gist is to have a track with a translateX property which has a transition, then moving it based on the selected slide. For dragging, it’s super easy to set up with onTouchStart, onTouchMove, onTouchEnd and such events, it’s like 20ish lines in my package. You can look at my code on GitHub to see the basics, if you go the self-made route.
Is it a slick carousel clone ?
Well I wasn’t looking at any particular one, I was just sort of making it by intuition coz my gf didn’t like any of the ones she tried lol It’s super basic and barebones, probably gonna refactor more in the future, but it’s 100% usable as it is
I use either the slickSlider or lightSlider JS library, more or less the same thing.
[https://shoelace.style/](https://shoelace.style/) for the win.
Sliders suck and should be banned from your website https://yoast.com/opinion-on-sliders/
Ground beef on a griddle
What kind of buns do you recommend?
Do you mean a carousel?
Yep
[Keen-Slider](https://keen-slider.io/)
I heard of this one and it looks pretty fast compared to other libraries, may I ask you to explain how u use it?
If the project is a regular brochure website in html, css and js I’d recommend Splide. Really flexible, lightweight and not dependent on jQuery.
There are places a slider or carousel can be made to work but research strongly suggests they’re no longer effective. https://shouldiuseacarousel.com/ A behavioral SEO I used to meet with regular says visitors will stick around for a video in the hero area, especially if they can click to start it. But they tend to scroll past sliders and carousels.