Sliderlight NPM

Slider Light

npm version license downloads

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:

npm install sliderlight

import SliderLight from "sliderlight";
// import SliderLight styles
import "sliderlight/css";

Using CDN

You can directly use SliderLight in your ptoject using a CDN link

<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/sliderlight@1/dist/sliderlight.min.css"
/>
<script src="https://cdn.jsdelivr.net/npm/sliderlight@1/dist/sliderlight-bundle.min.js"></script>

Git Repository: https://github.com/MoncyDev/slider-light/

Usage

const slider = new sliderLight(container, SliderOptions); // All slider options are optional

Here’s a basic example of how to use Slider-Light:

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 :

<div className="slider-container">
  <div className="slider-light">Slide 1</div>
  <div className="slider-light">Slide 2</div>
  <div className="slider-light">Slide 3</div>
  <div className="prev-slider-light"></div>
  <div className="next-slider-light"></div>
  <div className="slider-light-pagination"></div>
</div>

Basic Css: (optional)

.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;
}