Scribd
Upload
2 views5 pages

11 JavaScript Slider

The jSuites slider is a lightweight and responsive tool for creating dynamic photo galleries in web applications, featuring easy integration and various options. It includes methods for opening, closing, and navigating through images, as well as event triggers for component actions. The documentation provides installation instructions, initialization options, and example code for implementation.

Uploaded by

Lâm Trần
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
2 views5 pages

11 JavaScript Slider

The jSuites slider is a lightweight and responsive tool for creating dynamic photo galleries in web applications, featuring easy integration and various options. It includes methods for opening, closing, and navigating through images, as well as event triggers for component actions. The documentation provides installation instructions, initialization options, and example code for implementation.

Uploaded by

Lâm Trần
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd

09:42 7/6/26 JavaScript Slider

menu

Documentation keyboard_arrow_right Image slider

JavaScript 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

1 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

[Link] 1/5
09:42 7/6/26 JavaScript Slider

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

[Link] 2/5
09:42 7/6/26 JavaScript Slider

Open the slider

[Link] 3/5
09:42 7/6/26 JavaScript Slider

<html>
<script src="[Link]
<link rel="stylesheet" href="[Link]
type="text/css" />

<div id="slider">
<img src="[Link]
<img src="[Link]
<img src="[Link]
</div>

<br>

<button id="open-slider" type="button" class="jbutton dark">Open the


slider</button>

<script>
const slider = [Link]([Link]('slider'), {
grid: true
});

[Link]('open-slider').addEventListener('click',
function() {
[Link]();
});
</script>
</html>

Related Components
Related Tools
JavaScript Image Cropper - Crop, rotate, and edit images with brightness/contrast
controls

[Link] 4/5
09:42 7/6/26 JavaScript Slider

LemonadeJS Image Cropper - Reactive image cropper component


Jspreadsheet CE Images - Image column types in data grids (free version)

Pro Features
Jspreadsheet Pro Images - Advanced image columns and custom editors
Media Integration - Floating images and media libraries in spreadsheets

[Link] 5/5

You might also like