---
title: "JavaScript Slider"
description: "jSuites slider is a lightweight JavaScript image slider plugin that enhances web pages with dynamic photo galleries."
source: https://jsuites.net/docs/image-slider
---
The jSuites slider offers a responsive and lightweight solution for embedding dynamic photo galleries in web applications. Its straightforward integration process and versatile options make it ideal for enriching web environments with visually captivating galleries.
## Documentation
### Install
```bash
npm install jsuites
```
### Methods
| Method | Description |
|-------------------|------------------------------------------------------------------------|
| open(); | Open the slider |
| close(); | Close the slider |
| show(imgElement); | Open the slider if it is closed, and show the image passed as argument |
| next(); | Go to the next image |
| prev(); | Go to the previous image |
| reset(); | Remove all images |
### Events
| Method | Description |
|---------|------------------------------------------------|
| onopen | Trigger a method when the component is opened. |
| onclose | Trigger a method when the component is closed. |
### Initialization options
| Property | Description |
|----------------|---------------------------|
| height: string | The picker height. |
| width: string | The picker width. |
| grid: boolean | The picker layout option. |
## Examples
### Basic image slider example
```html
```
```jsx
import { Slider } from "jsuites/react"
import { useRef } from "react"
import "jsuites/dist/jsuites.css"
function App() {
const slider = useRef(null);
return (
);
}
export default App;
```
```vue
```
## Related Components
### Related Tools
- [JavaScript Image Cropper](/docs/image-cropper) - Crop, rotate, and edit images with brightness/contrast controls
- [LemonadeJS Image Cropper](https://lemonadejs.com/docs/plugins/image-cropper) - Reactive image cropper component
- [Jspreadsheet CE Images](https://jspreadsheet.com/docs/ce/images) - Image column types in data grids (free version)
### Pro Features
- [Jspreadsheet Pro Images](https://jspreadsheet.com/docs/images) - Advanced image columns and custom editors
- [Media Integration](https://jspreadsheet.com/docs/media) - Floating images and media libraries in spreadsheets
