10 Best React Carousel/Image Slider Plugins With Demo (voidcanvas.com) Ref
Carousel or image sliders have always increased the visual attraction of websites and they are also very useful for reflecting the major parts of a website. For an example, if i have a website of books, i would love to have a image slider consisting all the images of the popular books. But obviously, developing code for an image slider from the scratch is time consuming and most of the time people wouldn't want to invest their valuable time in it. I guess i have used the word 'time' a lot of time here. HaHa! Well, in this article we are going to list out best 10 react carousel/image slider plugins you can definitely use for the purpose.
React-Slick
Slick is one of the most popular jQuery carousel available in the market and their react version has also gained equal popularity with more than 4000 git stars. According to npm downloads React-Slick was downloaded 3,80,000+ times last month. It has a fully responsive design with both horizontal and vertical sliding. Infinite loop, auto sliding, lazy loading and many more available features.
Features
- Fully responsive.
- Easy customizable.
- Separate settings per breakpoint.
- Uses CSS3 when available. Fully functional when not.
- Horizontal and vertical sliding.
- Swipe enabled.
- Desktop mouse dragging.
- Infinite looping.
- Arrow key navigation.
- Add, remove, filter & unfilter slides.
- Autoplay, dots, arrows, callbacks and many more.
React-Swipe
React-swipe provides simple react component for building react image sliders. It comes with a responsive and mobile friendly design but doesn't support the vertical sliding. Still for its simple design and light weight it is likely to be fit most of the time.
Features
- Responsive design.
- Horizontal sliding.
- Basic customization.
- Auto slide show and infinite looping.
- callback, transitionEnd and many more.
Nuka-Carousel
A Pure and user friendly ReactJS Carousel Component. Nuka-Carousel is one of the most popular react image slider library in the market with more than 900 git stars. It provides many decorating options and all of it's features are highly customizable. Nuka carousel is touch friendly and works fine on mobile devices.
Features
- Responsive design.
- Both horizontal and vertical sliding option.
- Customizable.
- Touch enabled.
- Autoplay, infinite loop, frame overflow, frame padding and many more.
React-Image-Gallery
React-Image-Gallery is a flexible and responsive carousel component for ReactJS. This react image slider plugin is very easy to set up and needs no major changes. Till now the only highlighted draw back i found is it doesn't support the vertical sliding. But for all kind of horizontal movements, this react image slider is surely doing great with 850+ git stars.
Features
- Flexible and responsive.
- Lightweight ~8kb (gzipped, excluding react).
- Horizontal movement.
- Mobile Swipe Gestures.
- Thumbnail Navigation.
- Fullscreen Support.
- Custom Rendered Slides.
- Highly customizable.
- Infinite loop, autoplay, LazyLoad, slide on hover and many more.
React-Responsive-Carousel
React-Responsive-Carousel is a lightweight, powerful, easy to use and fully customizable carousel component for React applications. It comes with an amazing responsive and mobile friendly design having all the major facilities like animation, auto play, infinite looping and many more. You can do the both horizontal and vertical sliding using it and with more than 350 git starts this react carousel is well suitable for the task.
Features
- Responsive Design.
- Mobile friendly.
- Easy swipe to slide.
- Mouse emulating touch.
- Server side rendering, Keyboard navigation.
- Custom animation.
- Auto play with custom interval.
- Show/hide anything (thumbs, indicators, arrows, status).
- Infinite loop.
- Both horizontal or vertical directions.
- Supports pictures, videos, texts and many more.
- Supports any flux library.
React-Coverflow
This one is an unique react image slider library having its own style and attraction. React-Coverflow , as the name suggests, this react plugin helps creating cover flow style carousel in a convenient way. But it is lacking some major features like vertical sliding, auto play and touch compatibility, still we are considering it in the list because of the stylish way of image representation and with the present functionalities it can surely get placed in many websites.
Features
- Responsive design.
- Random image shuffling.
- Flexbox styles of CSS 3.
- Support scroll in the component.
- Navigation buttons optional
- Using css-module.
- Mobile friendly.
React-Animated Slider
Now this one is another cool react image slider library that has been freshly launched. The animated sliding with lazy loading texts has been the major attraction to the user. Though it hasn't earn enough git starts like all the above plugins but considering its potential we are including the React-Animated-Slider in the list.
Features
Animated Sliding.
Easy customization.
Horizontal or vertical navigation.
Swipe navigation on touch devices.
Infinite slider.
Supports any element as children.
Clean DOM without dirty manipulations.
Works with SSR.
Works on IE11.
React-Img-Carousel
A flexible React image carousel library having all the major features like lazy loading, autoplay, infinite scrolling, touch events and more. React-Img-carousel almost covers all the basic needs but doesn't support the vertical sliding. It is easy to use and customize.
Features
- Easy to use and customizable.
- Only horizontal sliding.
- Touch event supportable and dragable.
- Lazy loading.
- Auto play, infinite loop, dot navigation, arrow navigation, pause on hover and many more.
React-Image-Show
React-Image-Show is a well designed react image slider plugin that has been developed for the basic image sliding purpose. Though it doesn't have tons of eye catching features but perfectly satisfies the basic needs such as infinite looping, indicator showing, thumbnail showing etc. So if you are looking for a light weight and easy to use basic horizontal react image slider, this can be the perfect one.
Features
- Simple, esy to use, light weight.
- Simply customizable.
- Horizontal sliding.
- Infinite looping.
- Thumbnails.
- Navigation arrow.
- Fixed sizing.
React-Flexible-Carousel
A responsive flexible image carousel built on react. This react image carousel comes with all the basic features and really useful for demonstrating a light weight, clean and flexible image slider. It comes with some cool features like custom thumbs, thumbs showing number etc. We have marked the 'Custom Lists' as the best feature of this react image slider plugin.
Features
- Flexible and easy to use.
- Responsive design.
- Custom wrapping style.
- Custom thumbs.
- Auto play, lazy load.
- Custom lists.
- Touch mode.
No comments:
Post a Comment