A carousel positioned at the top of your page used to rotate product images or services sounds like a good idea, right?
The proposed main benefit of a carousel or slider is they're visually appealing and occupy the same level of hierarchy allowing you to highlight multiple features in the same space on a web page. Sounds great and looks cool, yea?
Well actually, no...
Statistics show that only 1% of users actually click a slider, and this is usually only the first slide, the stats drop even lower the more slides you have.
YOAST SEO gave their opinion on sliders and they didn't sugarcoat it either!
Rotating banners, static carousels and auto-playing sliders are beloved by web designers and some developers even insist on building them into themes. The bottom line is they don't convert, people ignore sliders, they slow down your site and have a negative impact on your SEO.
Yes, sliders are bad for SEO and kill your conversions!
So what's the solution?
Credit for the original idea goes to Lucas Eckman who did a post on this back in 2019 using REACT framework. Actually, I loved Lucas's idea so much I rebuilt my own lightweight jQuery version (for a WordPress plugin) using a similar approach.
As the user scrolls vertically down the page the viewport with slider is detected and locks in place. Vertical scrolling then transitions all slides horizontally, and once the user has scrolled past each slide the vertical scroll takes control again. The same behaviour is expected as users scroll back up the page.
Try out my codepen and feel free to reuse the code
See the Pen
Horizontal Carousel by Colin (@mrnoble)
on CodePen.