Dynamic Simple Slider/Carousel using React JS (all browser supported)

Have you ever wondered something which was built seems to be more difficult to imagine but not really that hard to write the code for it? Have you ever wanted to build those things? If you think about it, surely the carousel might pop up.

CAROUSEL!! CAROUSEL!!

Hey, it’s so simple. Choose some good plugins, install it & code over it!!

I was like that sometimes, but I really wanted to code that. I checked for the carousel plugin to match my requirement and so I analyzed what's the matter with those plugins. They have a lot of code written for it. Some of the plugin’s size was huge. It’s an unnecessary bundle size to my build…

So, I created it :)

It’s simple as taking the jam and butter and eating it!! I’m just kidding :P

Let’s get into the Image Slider/Carousel which is light, cross-functional and reusable.

Pre-requisite: Knowledge in Javascript, React, CSS

Design: Two navigation buttons (the button has to disable if there is no more scrollable content), any content in a limited size of the window

Functionality:

1. Capable of sliding horizontally the DOM elements
2. Use previous and next arrow icons to slide through the elements
3. In the mobile view, the users can able to either scroll horizontally or pressing the buttons to slide
4. The user shouldn’t able to see the scrollbar, but the scroll functionality should be provided whenever necessary
5. Disable the arrow icons in case of no content left

Please find the working model in the codepen.io

Let me explain some key concepts which I’ve used.

1. this.refs: refs are really helpful to access the DOM elements and do some tricky manipulations on it
2. offsetWidth: returns the layout width of an element as an integer in pixels
3. scrollWidth: returns the total width of an element’s content in pixels
4. scrollLeft: returns the number of pixels an element’s content is scrolled horizontally
5. disable: disabling the navigation buttons using CSS or JS is up to your requirements

Workarounds:

1. boundingClientRect: Instead of using offsetWidth or clientWidth, you can use this to get the most accurate value of the element’s width/height and many more
2. You can provide the previous and next buttons only if the content’s width is more than the parent elements width (basically the content requires scrolling)
3. We can pass images, text, videos, etc., as children to <Slider/>component
4. If you want to scroll vertically, use scrollTop, scrollHeight, offsetHeight instead of scrollLeft, scrollWidth, offsetWidth respectively

I am in the mission of writing content for the budding developers. I am more likable to write about a simple solution for a problem that seems to be tough at first sight but actually, it’s not. If you have such any ideas or faced at your career inception, drop in the comment box.

Please write if you have any queries, ideas or anything to write about in the future.

Here we go with the crazy sign off (please read as you can watch in the youtube channels) Please, Like, Comment, Follow & Subscribe to my blog site!!!

Mind reading about my other blogs? How about reading Styled Checkbox ?!