Website sliders can be used to share multiple images and convey information quickly without taking up too much space on your homepage.
This article will demonstrate how to use the react-draggable-slider package to build a slider with draggable functionality in React.
What is a slider?
A website slideshow is a collection of images or items arranged in a particular space. Each image is displayed separately over time, with a transition effect that changes from one item to another.
The slider images can be navigated using a series of navigation controls. Images or items can also be looped. A slider is a great way to showcase individual items on a website while saving space.
What is a draggable slider, you ask?
Draggable sliders can be navigated manually. The user moves from one item to another by holding the item in their hand and moving it to the right or left. The user must hold and drag the current item to its left to view the next item. The same goes for the previous item. To view it, hold the item and drag it to the left.
What is a react-draggable-slider?
You have two options: create a slider from scratch or use React packages to make it draggable.
React packages can help you be more productive by reducing the time spent writing code. It does, however, mean that your codebase may be dependent on the package and possibly vulnerable to it. It is better to choose an open-source package with a large community contributing, fixing, reporting and finding bugs. This will help keep the code secure.
React draggable slider demo
To demonstrate building a draggable slider in React, we’ll set up a React app, install the react-draggable-slider package, and then create and define the slider settings.
Installing the react-draggable-slider package
When writing, the react-draggable-slider package is not compatible with React v18, which is the version of React we’ll get when we create the React app.
So, if we try to install the slider package right now using the command: npm I react-draggable-slider, it won’t be installed, and we’ll get a dependency conflict error in our terminal, as shown below:
More great articles from LogRocket:
The Replay is a curated newsletter by LogRocket. Don’t miss it!
React’s use effect can optimize your application’s performance
Switch between multiple Node versions
How to animate React apps with AnimXYZ
Explore Tauri – A new framework to build binaries
Compare NestJS vs. Express.js
Find the most popular ORMs in the TypeScript landscape
As a workaround, we’ll need to downgrade the react package and react-dom package versions in our React app to v16 to be compatible with the react-draggable-slider package.
It is impossible to specify the React version desired when creating an app. This is why we had to create the app before downgrading it.
Navigate to the Package.json File and modify the react packages from v18.1.0 up to v16.13.1.
Next, type the following command: .npm install. This will replace all the versions currently stored in the node_modules directory with the one we specified in the pack.json file.