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.
<html>
<script src="https://jsuites.net/v6/jsuites.js"></script>
<link rel="stylesheet" href="https://jsuites.net/v6/jsuites.css" type="text/css" />
<div id="slider">
<img src="https://jsuites.net/templates/default/img/car.jpeg"/>
<img src="https://jsuites.net/templates/default/img/car2.jpeg"/>
<img src="https://jsuites.net/templates/default/img/car3.jpeg"/>
</div>
<br>
<button id="open-slider" type="button" class="jbutton dark">Open the slider</button>
<script>
const slider = jSuites.slider(document.getElementById('slider'), {
grid: true
});
document.getElementById('open-slider').addEventListener('click', function() {
slider.open();
});
</script>
</html>
import { Slider } from "jsuites/react"
import { useRef } from "react"
import "jsuites/dist/jsuites.css"
function App() {
const slider = useRef(null);
return (
<div className="App">
<Slider ref={slider} grid={true}>
<img src="https://jsuites.net/templates/default/img/car.jpeg"/>
<img src="https://jsuites.net/templates/default/img/car2.jpeg"/>
<img src="https://jsuites.net/templates/default/img/car3.jpeg"/>
</Slider>
<button onClick={() => { slider.current.open() }}>Open the slider</button>
</div>
);
}
export default App;
<template>
<Slider ref="slider" :grid="true">
<img src="https://jsuites.net/templates/default/img/car.jpeg"/>
<img src="https://jsuites.net/templates/default/img/car2.jpeg"/>
<img src="https://jsuites.net/templates/default/img/car3.jpeg"/>
</Slider>
<button @click="this.$refs.slider.current.open();">Open slider</button>
</template>
<script>
import { Slider } from "jsuites/vue";
import "jsuites/dist/jsuites.css"
export default {
name: "App",
components: {
Slider
}
};
</script>
