You may not need a carousel at least for mobile browsers
Approximately more than 85% of our visitors access yemek.com from mobile browsers. Most of us have used a carousel at least once in the components or somewhere in projects. In yemek.com, we were using react-slick which works well on desktop but causes some performance and memory leak problems on mobile browsers.
See here:
It was causing a freezing bug while scrolling and tapping the hamburger menu that affects user experience extremely bad. Also, the bundle size for react-slick is 14.5kB minified + gzipped.
![Bundle Size of react-slick](https://images.ctfassets.net/q5me9f7hwh72/45G3RpUlxmUFVTc4OLFBrh/1535b8c95fe0a60a567fe86f28717641/react-slick-bundle-size.png?q=50&fm=avif)
However, we’ve decided not to use any third-party carousels for mobile browsers to increase performance and user experience.
Let’s start by creating a component called Carosel.js. (We’re using emotion for CSS-in-JS but you can use styled-components of course.)
We’ll have a Container and children of it. So the Container should be scrolled horizontally and shouldn’t be scrolled vertically. Container div will look like this:
The children will get a width as a prop to size it correctly. It will look like this:
The overall of Carousel.js component will look this as well:
The result:
![Slider Result](https://images.ctfassets.net/q5me9f7hwh72/6tZtajgTJnvSHS73VnPwVL/0fddedaafd43c596964329c7de59aa7c/slider-result.gif?q=50&fm=avif)