https://github.com/moncydev/slider-light
A light-weight and basic Javascript slider
https://github.com/moncydev/slider-light
carousel javascript slider slider-plugin typescript
Last synced: 9 months ago
JSON representation
A light-weight and basic Javascript slider
- Host: GitHub
- URL: https://github.com/moncydev/slider-light
- Owner: MoncyDev
- License: mit
- Created: 2024-08-15T09:42:10.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2024-09-03T10:47:54.000Z (almost 2 years ago)
- Last Synced: 2025-10-07T16:43:42.087Z (9 months ago)
- Topics: carousel, javascript, slider, slider-plugin, typescript
- Language: JavaScript
- Homepage:
- Size: 36.1 KB
- Stars: 3
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Slider Light
Sliderlight is a light-weight and basic JavaScript slider library which enables developers to easily create sliders which has features like navigation, pagination, touch-slider, drag-slider, slidesPerView and more.
## Installation
### Install from NPM
We can install SliderLight using npm:
```bash
npm install sliderlight
```
```javascript
import SliderLight from "sliderlight";
// import SliderLight styles
import "sliderlight/css";
```
### Using CDN
You can directly use SliderLight in your ptoject using a CDN link
```html
```
Git Repository: https://github.com/MoncyDev/slider-light/
## Usage
```javascript
const slider = new sliderLight(container, SliderOptions); // All slider options are optional
```
Here’s a basic example of how to use Slider-Light:
```javascript
const slider = new SliderLight(".slider-container", {
//SliderOptions{}
prevButton: ".prev-slider-light",
nextButton: ".next-slider-light",
autoplay: 3000,
transition: 500,
margin: 20,
slidesPerView: 1,
pagination: ".slider-light-pagination",
breakpoints: {
// window width is >= 400px
400: {
slidesPerView: 2,
margin: 10,
},
// window width is >= 700px
700: {
slidesPerView: 3,
margin: 20,
},
// window width is >= 1024px
1024: {
slidesPerView: 4,
margin: 30,
},
},
});
```
### HTML :
```html
Slide 1
Slide 2
Slide 3
```
### Basic Css: (optional)
```css
.slider-light {
display: flex;
text-align: center;
align-items: center;
justify-content: center;
background-color: white;
border-radius: 30px;
color: black;
height: 300px;
}
.slider-container {
width: 90%;
margin: 20px auto;
}
```
## License
This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.