anvarkhalid-slider
v1.0.1
Published
This slider was created by Anvar Khalid (Microsoft Certified Trainer and Technical Solutions Architect)
Downloads
30
Maintainers
anvarkhalidReadme
Anvarkhalid Slider
A responsive slider package for JavaScript.
Installation
To use this package, install it using npm:
npm install anvarkhalid-slider
Usage
Add the following HTML and JavaScript to your project to use the slider:
HTML File
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Slider Example</title>
<link rel="stylesheet" href="node_modules/anvarkhalid-slider/src/slider.css">
</head>
<body>
<div class="slider-container">
<div class="slider">
<div class="slide"><img src="shekil1.jpg" alt="Image 1"></div>
<div class="slide"><img src="shekil2.jpg" alt="Image 2"></div>
<div class="slide"><img src="shekil3.jpg" alt="Image 3"></div>
<div class="slide"><img src="shekil4.jpg" alt="Image 4"></div>
<div class="slide"><img src="shekil5.jpg" alt="Image 5"></div>
<div class="slide"><img src="shekil6.jpg" alt="Image 6"></div>
</div>
<div class="nav-buttons">
<button class="prev">Previous</button>
<button class="next">Next</button>
</div>
</div>
<script src="node_modules/anvarkhalid-slider/index.js"></script>
<script>
const slider = new Slider('.slider-container');
</script>
</body>
</html>
JavaScript File
Create a JavaScript file and add the following code to initialize the slider:
javascript
Copy code
import Slider from 'anvarkhalid-slider';
const slider = new Slider('.slider-container');
Author
Anvar Khalid