A dependency-free, fast and lightweight slider.
<!-- Import CSS -->
<link rel="stylesheet" href="node_modules/slider-simple/slider.css">
<!-- Implement Slider -->
<div class="test slider">
<div class="slider-navigation">⬅</div>
<div class="slider-content">
<div class="slider-items">
<!-- Put your slider items (Custom CSS) -->
<div class="slider-item">1</div>
<div class="slider-item">2</div>
<div class="slider-item">3</div>
<div class="slider-item">4</div>
<div class="slider-item">5</div>
<div class="slider-item">6</div>
</div>
</div>
<div class="slider-navigation">➡</div>
</div>
// for Node Modules
const Slider = require("slider-simple");
// for ES6 Modules
import Slider from "slider-simple";
new Slider(".test", { gap: 8 });
Option | Type | Description |
---|---|---|
gap | number | A size of the space between slides. (px) |
perPage | number | A number of visible slides. |